Maintenance: Upgrade to prettier 3

code/.eslintrc.js

@@ -27,6 +27,7 @@ module.exports = {
     'jest/no-standalone-expect': 'off',
     'jest/no-done-callback': 'off',
     'jest/no-deprecated-functions': 'off',
+    'jest/valid-expect': 'off',
 
     'eslint-comments/disable-enable-pair': ['error', { allowWholeFile: true }],
     'eslint-comments/no-unused-disable': 'error',

code/addons/a11y/src/components/Report/HighlightToggle.tsx

@@ -31,8 +31,8 @@ function areAllRequiredElementsHighlighted(
   return highlightedCount === 0
     ? CheckBoxStates.UNCHECKED
     : highlightedCount === elementsToHighlight.length
-    ? CheckBoxStates.CHECKED
-    : CheckBoxStates.INDETERMINATE;
+      ? CheckBoxStates.CHECKED
+      : CheckBoxStates.INDETERMINATE;
 }
 
 const HighlightToggle: React.FC<ToggleProps> = ({ toggleId, elementsToHighlight = [] }) => {

code/addons/backgrounds/src/containers/BackgroundSelector.tsx

@@ -37,40 +37,24 @@ const createBackgroundSelectorItem = memoize(1000)(
   })
 );
 
-const getDisplayedItems = memoize(10)(
-  (
-    backgrounds: Background[],
-    selectedBackgroundColor: string | null,
-    change: (arg: { selected: string; name: string }) => void
-  ) => {
-    const backgroundSelectorItems = backgrounds.map(({ name, value }) =>
-      createBackgroundSelectorItem(
-        null,
-        name,
-        value,
-        true,
-        change,
-        value === selectedBackgroundColor
-      )
-    );
-
-    if (selectedBackgroundColor !== 'transparent') {
-      return [
-        createBackgroundSelectorItem(
-          'reset',
-          'Clear background',
-          'transparent',
-          null,
-          change,
-          false
-        ),
-        ...backgroundSelectorItems,
-      ];
-    }
+const getDisplayedItems = memoize(10)((
+  backgrounds: Background[],
+  selectedBackgroundColor: string | null,
+  change: (arg: { selected: string; name: string }) => void
+) => {
+  const backgroundSelectorItems = backgrounds.map(({ name, value }) =>
+    createBackgroundSelectorItem(null, name, value, true, change, value === selectedBackgroundColor)
+  );
 
-    return backgroundSelectorItems;
+  if (selectedBackgroundColor !== 'transparent') {
+    return [
+      createBackgroundSelectorItem('reset', 'Clear background', 'transparent', null, change, false),
+      ...backgroundSelectorItems,
+    ];
   }
-);
+
+  return backgroundSelectorItems;
+});
 
 const DEFAULT_BACKGROUNDS_CONFIG: BackgroundsParameter = {
   default: null,

code/addons/viewport/src/Tool.tsx

@@ -35,21 +35,24 @@ const responsiveViewport: ViewportItem = {
 
 const baseViewports: ViewportItem[] = [responsiveViewport];
 
-const toLinks = memoize(50)(
-  (list: ViewportItem[], active: LinkBase, updateGlobals, close): Link[] => {
-    return list
-      .filter((i) => i.id !== responsiveViewport.id || active.id !== i.id)
-      .map((i) => {
-        return {
-          ...i,
-          onClick: () => {
-            updateGlobals({ viewport: i.id });
-            close();
-          },
-        };
-      });
-  }
-);
+const toLinks = memoize(50)((
+  list: ViewportItem[],
+  active: LinkBase,
+  updateGlobals,
+  close
+): Link[] => {
+  return list
+    .filter((i) => i.id !== responsiveViewport.id || active.id !== i.id)
+    .map((i) => {
+      return {
+        ...i,
+        onClick: () => {
+          updateGlobals({ viewport: i.id });
+          close();
+        },
+      };
+    });
+});
 
 interface LinkBase {
   id: string;

code/builders/builder-vite/src/vite-config.test.ts

@@ -25,7 +25,7 @@ const dummyOptions: Options = {
           builder: {},
         },
         options: {},
-      }[key]),
+      })[key],
   } as Presets,
   presetsList: [],
 };

code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts

@@ -132,9 +132,8 @@ export default async (
     externals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__';
   }
 
-  const { virtualModules: virtualModuleMapping, entries: dynamicEntries } = await getVirtualModules(
-    options
-  );
+  const { virtualModules: virtualModuleMapping, entries: dynamicEntries } =
+    await getVirtualModules(options);
 
   return {
     name: 'preview',
@@ -286,26 +285,26 @@ export default async (
                   }),
                 ]
               : builderOptions.useSWC
-              ? [
-                  new TerserWebpackPlugin<SwcOptions>({
-                    minify: TerserWebpackPlugin.swcMinify,
-                    terserOptions: {
-                      sourceMap: !options.build?.test?.disableSourcemaps,
-                      mangle: false,
-                      keep_fnames: true,
-                    },
-                  }),
-                ]
-              : [
-                  new TerserWebpackPlugin({
-                    parallel: true,
-                    terserOptions: {
-                      sourceMap: !options.build?.test?.disableSourcemaps,
-                      mangle: false,
-                      keep_fnames: true,
-                    },
-                  }),
-                ],
+                ? [
+                    new TerserWebpackPlugin<SwcOptions>({
+                      minify: TerserWebpackPlugin.swcMinify,
+                      terserOptions: {
+                        sourceMap: !options.build?.test?.disableSourcemaps,
+                        mangle: false,
+                        keep_fnames: true,
+                      },
+                    }),
+                  ]
+                : [
+                    new TerserWebpackPlugin({
+                      parallel: true,
+                      terserOptions: {
+                        sourceMap: !options.build?.test?.disableSourcemaps,
+                        mangle: false,
+                        keep_fnames: true,
+                      },
+                    }),
+                  ],
           }
         : {}),
     },

code/frameworks/angular/src/client/angular-beta/ComputesTemplateFromComponent.ts

@@ -172,7 +172,7 @@ const buildTemplate = (
   const firstSelector = selector.split(',')[0];
   const templateReplacers: [
     string | RegExp,
-    string | ((substring: string, ...args: any[]) => string)
+    string | ((substring: string, ...args: any[]) => string),
   ][] = [
     [/(^.*?)(?=[,])/, '$1'],
     [/(^\..+)/, 'div$1'],

code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.ts

@@ -41,7 +41,10 @@ export class PropertyExtractor implements NgModuleMetadata {
   applicationProviders?: Array<Provider | ReturnType<typeof importProvidersFrom>>;
   /* eslint-enable @typescript-eslint/lines-between-class-members */
 
-  constructor(private metadata: NgModuleMetadata, private component?: any) {
+  constructor(
+    private metadata: NgModuleMetadata,
+    private component?: any
+  ) {
     this.init();
   }
 

code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selector.component.ts

@@ -11,7 +11,10 @@ export class AttributeSelectorComponent {
 
   selectors!: string;
 
-  constructor(public el: ElementRef, private resolver: ComponentFactoryResolver) {
+  constructor(
+    public el: ElementRef,
+    private resolver: ComponentFactoryResolver
+  ) {
     const factory = this.resolver.resolveComponentFactory(AttributeSelectorComponent);
     this.selectors = factory.selector;
     this.generatedTemplate = el.nativeElement.outerHTML;

code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.ts

@@ -11,7 +11,10 @@ export class ClassSelectorComponent {
 
   selectors!: string;
 
-  constructor(public el: ElementRef, private resolver: ComponentFactoryResolver) {
+  constructor(
+    public el: ElementRef,
+    private resolver: ComponentFactoryResolver
+  ) {
     const factory = this.resolver.resolveComponentFactory(ClassSelectorComponent);
     this.selectors = factory.selector;
     this.generatedTemplate = el.nativeElement.outerHTML;

code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.ts

@@ -11,7 +11,10 @@ export class MultipleSelectorComponent {
 
   selectors!: string;
 
-  constructor(public el: ElementRef, private resolver: ComponentFactoryResolver) {
+  constructor(
+    public el: ElementRef,
+    private resolver: ComponentFactoryResolver
+  ) {
     const factory = this.resolver.resolveComponentFactory(MultipleClassSelectorComponent);
     this.selectors = factory.selector;
     this.generatedTemplate = el.nativeElement.outerHTML;
@@ -29,7 +32,10 @@ export class MultipleClassSelectorComponent {
 
   selectors!: string;
 
-  constructor(public el: ElementRef, private resolver: ComponentFactoryResolver) {
+  constructor(
+    public el: ElementRef,
+    private resolver: ComponentFactoryResolver
+  ) {
     const factory = this.resolver.resolveComponentFactory(MultipleClassSelectorComponent);
     this.selectors = factory.selector;
     this.generatedTemplate = el.nativeElement.outerHTML;

code/frameworks/nextjs/src/babel/plugins/jsx-pragma.ts

@@ -78,9 +78,9 @@ export default function jsxPragma({ types: t }: { types: typeof BabelTypes }): P
                     ? // import { $import as _pragma } from '$module'
                       t.importSpecifier(importAs, t.identifier(state.opts.import))
                     : state.opts.importNamespace
-                    ? t.importNamespaceSpecifier(importAs)
-                    : // import _pragma from '$module'
-                      t.importDefaultSpecifier(importAs),
+                      ? t.importNamespaceSpecifier(importAs)
+                      : // import _pragma from '$module'
+                        t.importDefaultSpecifier(importAs),
                 ],
                 t.stringLiteral(state.opts.module || 'react')
               );

code/frameworks/nextjs/src/babel/plugins/next-ssg-transform.ts

@@ -198,10 +198,10 @@ export default function nextTransformSsg({
                       p.node.type === 'ObjectProperty'
                         ? 'value'
                         : p.node.type === 'RestElement'
-                        ? 'argument'
-                        : (function () {
-                            throw new Error('invariant');
-                          })()
+                          ? 'argument'
+                          : (function () {
+                              throw new Error('invariant');
+                            })()
                     ) as NodePath<BabelTypes.Identifier>;
                     if (isIdentifierReferenced(local)) {
                       variableState.refs.add(local);
@@ -360,10 +360,10 @@ export default function nextTransformSsg({
                       p.node.type === 'ObjectProperty'
                         ? 'value'
                         : p.node.type === 'RestElement'
-                        ? 'argument'
-                        : (function () {
-                            throw new Error('invariant');
-                          })()
+                          ? 'argument'
+                          : (function () {
+                              throw new Error('invariant');
+                            })()
                     ) as NodePath<BabelTypes.Identifier>;
 
                     if (refs.has(local) && !isIdentifierReferenced(local)) {

code/lib/cli/package.json

@@ -87,7 +87,7 @@
     "jscodeshift": "^0.15.1",
     "leven": "^3.1.0",
     "ora": "^5.4.1",
-    "prettier": "^2.8.0",
+    "prettier": "^3.1.1",
     "prompts": "^2.4.0",
     "read-pkg-up": "^7.0.1",
     "semver": "^7.3.7",

code/lib/cli/src/automigrate/fixes/angular-builders-multiproject.test.ts

@@ -104,7 +104,7 @@ describe('is not Nx project', () => {
             () =>
               ({
                 hasStorybookBuilder: true,
-              } as any)
+              }) as any
           );
         });
 
@@ -129,7 +129,7 @@ describe('is not Nx project', () => {
                   project1: { root: 'project1', architect: {} },
                 },
                 rootProject: 'project1',
-              } as any)
+              }) as any
           );
         });
 
@@ -155,7 +155,7 @@ describe('is not Nx project', () => {
                   project2: { root: 'project2', architect: {} },
                 },
                 rootProject: null,
-              } as any)
+              }) as any
           );
         });
 

code/lib/cli/src/automigrate/fixes/angular-builders.test.ts

@@ -107,7 +107,7 @@ describe('is not Nx project', () => {
             () =>
               ({
                 hasStorybookBuilder: true,
-              } as any)
+              }) as any
           );
         });
 
@@ -133,7 +133,7 @@ describe('is not Nx project', () => {
                   project2: { root: 'project2', architect: {} },
                 },
                 rootProject: null,
-              } as any)
+              }) as any
           );
         });
 
@@ -158,7 +158,7 @@ describe('is not Nx project', () => {
                   project1: { root: 'project1', architect: {} },
                 },
                 rootProject: 'project1',
-              } as any)
+              }) as any
           );
         });
 

code/lib/cli/src/automigrate/fixes/new-frameworks.ts

@@ -218,10 +218,10 @@ export const newFrameworks: Fix<NewFrameworkRunOptions> = {
         ❌ Your project should be upgraded to use the framework package ${chalk.bold(
           newFrameworkPackage
         )}, but we detected that you are using Vite ${chalk.bold(
-        viteVersion
-      )}, which is unsupported in ${chalk.bold(
-        'Storybook 7.0'
-      )}. Please upgrade Vite to ${chalk.bold('3.0.0 or higher')} and rerun this migration.
+          viteVersion
+        )}, which is unsupported in ${chalk.bold(
+          'Storybook 7.0'
+        )}. Please upgrade Vite to ${chalk.bold('3.0.0 or higher')} and rerun this migration.
       `);
     }
 
@@ -351,8 +351,8 @@ export const newFrameworks: Fix<NewFrameworkRunOptions> = {
           This migration is set to update your project to use the ${chalk.magenta(
             '@storybook/react-vite'
           )} framework, but Storybook provides a framework package specifically for Next.js projects: ${chalk.magenta(
-          '@storybook/nextjs'
-        )}.
+            '@storybook/nextjs'
+          )}.
 
           This package provides a better, out of the box experience for Next.js users, however it is only compatible with the Webpack 5 builder, so we can't automigrate for you, as you are using the Vite builder. If you switch this project to use Webpack 5 and rerun this migration, we can update your project.
 
@@ -379,8 +379,8 @@ export const newFrameworks: Fix<NewFrameworkRunOptions> = {
           This migration is set to update your project to use the ${chalk.magenta(
             '@storybook/svelte-webpack5'
           )} framework, but Storybook provides a framework package specifically for SvelteKit projects: ${chalk.magenta(
-          '@storybook/sveltekit'
-        )}.
+            '@storybook/sveltekit'
+          )}.
 
           This package provides a better experience for SvelteKit users, however it is only compatible with the Vite builder, so we can't automigrate for you, as you are using the Webpack builder.