Upgrading @storybook/addon-interactions 6 to 7
Breaking6.5.16 → 7.6.24Breaking40Security11Platform7Deprecated6New188Changed290Fixed690Other590
BreakingUpgrade verdict
40 breaking changes and 7 platform requirement changes and 11 security fixes.
In plain terms
- Removes defaultProps in the Stories doc block.
- Renames index to createIndex.
- Storybook packages no longer require you to install React as a peer dependency.
- Two old channel packages and references to api are gone, so anything relying on them will stop working.
Must act Top 5 of 64 that need code or config changes
@storybook/addon-interactions publishes an official migration guide for version 7. It covers more than the release notes do.
Migration guide ↗Adds @storybook/global ^5.0.0, @storybook/types 7.6.24.
Drops @devtools-ds/object-inspector, @storybook/addons, @storybook/api, @storybook/client-logger, @storybook/components, @storybook/core-common, @storybook/core-events, @storybook/csf, @storybook/instrumenter, @storybook/theming, core-js, global.
Installs 74 packages in all (was 791).
What you must change
Breaking40
Removes defaultProps in the Stories doc block.
StoriesdefaultPropsRenames index to createIndex.
indexcreateIndexRemoves the need for
react as a peerDependency.reactRemoves references to api and the 2 deprecated channel packages.
Angular removes deprecated component and propsMeta from story.
componentpropsMetaRemoves deprecated flags and properties.
Renames the framework parameter to renderer in Core.
frameworkrendererRemoves DocsOptions.disable.
DocsOptions.disableDrops lit1 support for web components.
lit1Removes
svelte-options from Svelte/Vite.svelte-optionsRemoves the deprecated --no-manager-cache CLI flag.
--no-manager-cacheRemoves the deprecated ArgTypes.defaultValue from CSF.
ArgTypes.defaultValueRenames storyByModuleExport to resolveModuleExport.
storyByModuleExportresolveModuleExportRenames docsPage to autodocs.
docsPageautodocsRenames docsOptions.enabled to docsOptions.disable.
docsOptions.enableddocsOptions.disableRenames the api package to manager-api.
apimanager-apiRenames Framework to Renderer in CSF.
Preact now uses inline stories without an iframe by default in docs.
CLI removes the deprecated -s flag on sb init.
sb init-sRenames storybook/ui to storybook/manager.
storybook/uistorybook/managerRemoves the final batch of deprecated APIs.
Removes deprecated addon APIs.
Removes onBeforeRender.
onBeforeRenderRemoves the old showRoots config option.
showRootsRemoves the html entrypoint of lib/components.
lib/componentsRemoves the deprecated Preview component.
PreviewRemoves deprecated channel APIs.
Removes framework angulars storymodule story-component handling.
Removes deprecated glob fixing.
Addon-docs: Remove STORYBOOK_REACT_CLASSES and global/globals.ts.
STORYBOOK_REACT_CLASSESglobal/globals.tsReplaces
config with previewAnnotations and removes previewEntries in Presets.configpreviewAnnotationspreviewEntriesRenames Storybook DOM root IDs.
Removes the docs tab from the UI.
Removes standalone node APIs from Core.
Creates frameworks and renames renderers.
Removes start-storybook and build-storybook from all frameworks.
start-storybookbuild-storybookRemoves experimental components.
Addon-docs upgrades to MDXv2.
Addon-docsMDXv2Upgrades the build chain to TS4, Webpack5, modern ESM, and TSUP.
Factors webpack dependencies out of core-webpack.
Security11
Hardens the websocket connection.
Replaces the ip function to address security concerns.
ipUpdates the ip dependency to fix CVE-2023-42282.
ipUpdates @babel/traverse and @babel/core to fix a vulnerability.
@babel/traverse@babel/coreUpdates the browserify-sign transitive dependency.
browserify-signFilters addon options in telemetry to protect sensitive info.
Upgrades
escodegen to fix a security issue.escodegenFixes the security report around the download-tarball package.
download-tarballFixes a trim vulnerability.
trimUpgrades express to fix a security warning.
expressUpdates x-default-browser and fixes an issue with the package.
x-default-browserPlatform7
Moves typescript from devDependencies to peerDependencies in React.
typescriptMakes vite a peer dependency and updates plugins.
viteAdds an optional TypeScript peer dependency.
typescriptExtends the Angular Zone.js peer dependency range.
Fixes peer dependencies for npm8, pnpm and yarn PnP.
Adds a Next13 peer dependency for NextJS.
nextAdds babel loader 9.0.0 to vue-webpack5 peer dependencies.
babel-loadervue-webpack5Deprecations to plan for
Deprecated6
Adds a deprecation notice for Vite with CommonJS.
ViteDeprecates storyStoreV6 (including storiesOf) and storyIndexers.
storyStoreV6storiesOfstoryIndexersDeprecates the
key in the addon render function as it is no longer available.keyRemoves deprecated addPanel use and makes miscellaneous improvements in addons.
addPanelFixes the d.ts file and deprecates LinkTo in addon-links.
LinkToRe-adds deprecated fields to lib/api.
lib/apiAPI changes
Generated by DepDelta from published .d.ts files. Not mixed with prose notes.
- added:
const default: {}
- removed:
const AddonPanelPure: React.FC<InteractionsPanelProps> - removed:
const Panel: React.FC<AddonPanelProps> - removed:
interface Controls - removed:
property Controls.back: (args: any) => void - removed:
property Controls.end: (args: any) => void - removed:
property Controls.goto: (args: any) => void - removed:
property Controls.next: (args: any) => void - removed:
property Controls.rerun: (args: any) => void - removed:
property Controls.start: (args: any) => void
- removed:
const AccountForm: FC<AccountFormProps> - removed:
interface AccountFormResponse - removed:
interface AccountFormValues - removed:
property AccountFormResponse.success: boolean - removed:
property AccountFormValues.email: string - removed:
property AccountFormValues.password: string - removed:
type AccountFormProps = { passwordVerification?: boolean; onSubmit?: (values: AccountFormValues) => void; onTransactionStart?: (values: AccountFormValues) => void; onTransactionEnd?:…
- removed:
const Interaction: ({ call, callsById, controls, controlStates }: { call: Call; callsById: Map<Call['id'], Call>; controls: Controls; controlStates: ControlStates }) => JSX.Eleme…
- removed:
const List: React.FC<ListProps> - removed:
const ListItem: React.FC<ListItemProps>
- removed:
const Expected: ({ value, parsed }: { value: any; parsed?: boolean }) => JSX.Element - removed:
const MatcherResult: ({ message }: { message: string }) => JSX.Element - removed:
const Received: ({ value, parsed }: { value: any; parsed?: boolean }) => JSX.Element
- removed:
const ArrayNode: ({ value, nested }: { value: any[]; nested?: boolean }) => JSX.Element - removed:
const BooleanNode: ({ value, ...props }: { value: boolean }) => JSX.Element - removed:
const ClassNode: ({ value }: { value: Record<string, any> }) => JSX.Element - removed:
const DateNode: ({ value }: { value: Date }) => JSX.Element - removed:
const ElementNode: ({ value }: { value: ElementRef['__element__'] }) => JSX.Element - removed:
const ErrorNode: ({ value }: { value: Error }) => JSX.Element - removed:
const FunctionNode: ({ value }: { value: Function }) => JSX.Element - removed:
const MethodCall: ({ call, callsById }: { call: Call; callsById: Map<Call['id'], Call> }) => JSX.Element - removed:
const Node: ({ value, nested, showObjectInspector, callsById, ...props }: { [props: string]: any; value: any; nested?: boolean; showObjectInspector?: boolean; callsById?:… - removed:
const NullNode: (props: object) => JSX.Element - removed:
const NumberNode: ({ value, ...props }: { value: number }) => JSX.Element - removed:
const ObjectNode: ({ showInspector, value, nested }: { showInspector?: boolean; value: object; nested?: boolean }) => JSX.Element - removed:
const OtherNode: ({ value }: { value: any }) => JSX.Element - removed:
const RegExpNode: ({ value }: { value: RegExp }) => JSX.Element - removed:
const StringNode: ({ value, ...props }: { value: string }) => JSX.Element - removed:
const SymbolNode: ({ value }: { value: symbol }) => JSX.Element - removed:
const UndefinedNode: (props: object) => JSX.Element
- removed:
const StatusBadge: React.FC<StatusBadgeProps> - removed:
interface StatusBadgeProps - removed:
property StatusBadgeProps.status: Call['status']
- removed:
const StatusIcon: React.FC<StatusIconProps> - removed:
interface StatusIconProps extends IconsProps - removed:
property StatusIconProps.status: Call['status']
- removed:
const StyledIconButton: import('@storybook/theming').StyledComponent<any, Pick<any, string | number | symbol>, import('@storybook/theming').Theme> - removed:
const Subnav: React.FC<SubnavProps> - removed:
interface SubnavProps - removed:
property SubnavProps.controlStates: ControlStates - removed:
property SubnavProps.controls: Controls - removed:
property SubnavProps.isRerunAnimating: boolean - removed:
property SubnavProps.onScrollToEnd?: () => void - removed:
property SubnavProps.setIsRerunAnimating: React.Dispatch<React.SetStateAction<boolean>> - removed:
property SubnavProps.status: Call['status'] - removed:
property SubnavProps.storyFileName?: string
- removed:
const ADDON_ID = 'storybook/interactions' - removed:
const PANEL_ID: string
- removed:
const _default: {} - removed:
default _default
- removed:
const getCall: (status: CallStates) => Call
- removed:
const checkActionsLoaded: (configDir: string) => void
- removed:
const argsEnhancers: ArgsEnhancer<AnyFramework, Args>[]
- removed:
const colors: Colors - removed:
const theme: { colors: Colors } - removed:
default theme
- removed:
const AddonPanelPure: React.FC<InteractionsPanelProps> - removed:
const Panel: React.FC<AddonPanelProps> - removed:
interface Controls - removed:
property Controls.back: (args: any) => void - removed:
property Controls.end: (args: any) => void - removed:
property Controls.goto: (args: any) => void - removed:
property Controls.next: (args: any) => void - removed:
property Controls.rerun: (args: any) => void - removed:
property Controls.start: (args: any) => void
- removed:
const AccountForm: FC<AccountFormProps> - removed:
interface AccountFormResponse - removed:
interface AccountFormValues - removed:
property AccountFormResponse.success: boolean - removed:
property AccountFormValues.email: string - removed:
property AccountFormValues.password: string - removed:
type AccountFormProps = { passwordVerification?: boolean; onSubmit?: (values: AccountFormValues) => void; onTransactionStart?: (values: AccountFormValues) => void; onTransactionEnd?:…
- removed:
const Interaction: ({ call, callsById, controls, controlStates }: { call: Call; callsById: Map<Call['id'], Call>; controls: Controls; controlStates: ControlStates }) => JSX.Eleme…
- removed:
const List: React.FC<ListProps> - removed:
const ListItem: React.FC<ListItemProps>
- removed:
const Expected: ({ value, parsed }: { value: any; parsed?: boolean }) => JSX.Element - removed:
const MatcherResult: ({ message }: { message: string }) => JSX.Element - removed:
const Received: ({ value, parsed }: { value: any; parsed?: boolean }) => JSX.Element
- removed:
const ArrayNode: ({ value, nested }: { value: any[]; nested?: boolean }) => JSX.Element - removed:
const BooleanNode: ({ value, ...props }: { value: boolean }) => JSX.Element - removed:
const ClassNode: ({ value }: { value: Record<string, any> }) => JSX.Element - removed:
const DateNode: ({ value }: { value: Date }) => JSX.Element - removed:
const ElementNode: ({ value }: { value: ElementRef['__element__'] }) => JSX.Element - removed:
const ErrorNode: ({ value }: { value: Error }) => JSX.Element - removed:
const FunctionNode: ({ value }: { value: Function }) => JSX.Element - removed:
const MethodCall: ({ call, callsById }: { call: Call; callsById: Map<Call['id'], Call> }) => JSX.Element - removed:
const Node: ({ value, nested, showObjectInspector, callsById, ...props }: { [props: string]: any; value: any; nested?: boolean; showObjectInspector?: boolean; callsById?:… - removed:
const NullNode: (props: object) => JSX.Element - removed:
const NumberNode: ({ value, ...props }: { value: number }) => JSX.Element - removed:
const ObjectNode: ({ showInspector, value, nested }: { showInspector?: boolean; value: object; nested?: boolean }) => JSX.Element - removed:
const OtherNode: ({ value }: { value: any }) => JSX.Element - removed:
const RegExpNode: ({ value }: { value: RegExp }) => JSX.Element - removed:
const StringNode: ({ value, ...props }: { value: string }) => JSX.Element - removed:
const SymbolNode: ({ value }: { value: symbol }) => JSX.Element - removed:
const UndefinedNode: (props: object) => JSX.Element
- removed:
const StatusBadge: React.FC<StatusBadgeProps> - removed:
interface StatusBadgeProps - removed:
property StatusBadgeProps.status: Call['status']
- removed:
const StatusIcon: React.FC<StatusIconProps> - removed:
interface StatusIconProps extends IconsProps - removed:
property StatusIconProps.status: Call['status']
- removed:
const StyledIconButton: import('@storybook/theming').StyledComponent<any, Pick<any, string | number | symbol>, import('@storybook/theming').Theme> - removed:
const Subnav: React.FC<SubnavProps> - removed:
interface SubnavProps - removed:
property SubnavProps.controlStates: ControlStates - removed:
property SubnavProps.controls: Controls - removed:
property SubnavProps.isRerunAnimating: boolean - removed:
property SubnavProps.onScrollToEnd?: () => void - removed:
property SubnavProps.setIsRerunAnimating: React.Dispatch<React.SetStateAction<boolean>> - removed:
property SubnavProps.status: Call['status'] - removed:
property SubnavProps.storyFileName?: string
- removed:
const ADDON_ID = 'storybook/interactions' - removed:
const PANEL_ID: string
- removed:
const _default: {} - removed:
default _default
- removed:
const getCall: (status: CallStates) => Call
- removed:
const checkActionsLoaded: (configDir: string) => void
- removed:
const argsEnhancers: ArgsEnhancer<AnyFramework, Args>[]
- removed:
const colors: Colors - removed:
const theme: { colors: Colors } - removed:
default theme