7.0.10 patch release

code/frameworks/angular/src/builders/utils/run-compodoc.spec.ts

@@ -8,6 +8,16 @@ jest.doMock('child_process', () => cpSpawnMock);
 
 const { runCompodoc } = require('./run-compodoc');
 
+const mockRunScript = jest.fn();
+
+jest.mock('@storybook/cli', () => ({
+  JsPackageManagerFactory: {
+    getPackageManager: () => ({
+      runPackageCommandSync: mockRunScript,
+    }),
+  },
+}));
+
 const builderContextLoggerMock: LoggerApi = {
   createChild: jest.fn(),
   log: jest.fn(),

code/frameworks/angular/src/builders/utils/run-compodoc.ts

@@ -28,7 +28,7 @@ export const runCompodoc = (
     const packageManager = JsPackageManagerFactory.getPackageManager();
 
     try {
-      const stdout = packageManager.runPackageCommand(
+      const stdout = packageManager.runPackageCommandSync(
         'compodoc',
         finalCompodocArgs,
         context.workspaceRoot

code/frameworks/angular/template/cli/header.component.ts

@@ -4,7 +4,7 @@ import type { User } from './User';
 @Component({
   selector: 'storybook-header',
   template: `<header>
-    <div class="wrapper">
+    <div class="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">

code/frameworks/angular/template/cli/page.component.ts

@@ -10,7 +10,7 @@ import type { User } from './User';
       (onLogin)="doLogin()"
       (onCreateAccount)="doCreateAccount()"
     ></storybook-header>
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a

code/frameworks/nextjs/template/cli/js/Header.jsx

@@ -6,7 +6,7 @@ import './header.css';
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
   <header>
-    <div className="wrapper">
+    <div className="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">

code/frameworks/nextjs/template/cli/js/Page.jsx

@@ -14,8 +14,7 @@ export const Page = () => {
         onLogout={() => setUser(undefined)}
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
-
-      <section>
+      <section className="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}

code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx

@@ -16,7 +16,7 @@ interface HeaderProps {
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
   <header>
-    <div className="wrapper">
+    <div className="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">

code/frameworks/nextjs/template/cli/ts-3-8/Page.tsx

@@ -19,7 +19,7 @@ export const Page: React.FC = () => {
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
 
-      <section>
+      <section className="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}

code/frameworks/nextjs/template/cli/ts/Header.tsx

@@ -16,7 +16,7 @@ interface HeaderProps {
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
   <header>
-    <div className="wrapper">
+    <div className="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">

code/frameworks/nextjs/template/cli/ts/Page.tsx

@@ -19,7 +19,7 @@ export const Page: React.FC = () => {
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
 
-      <section>
+      <section className="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}

code/lib/cli/rendererAssets/common/header.css

@@ -1,4 +1,4 @@
-.wrapper {
+.storybook-header {
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding: 15px 20px;
@@ -7,12 +7,12 @@
   justify-content: space-between;
 }
 
-svg {
+.storybook-header svg {
   display: inline-block;
   vertical-align: top;
 }
 
-h1 {
+.storybook-header h1 {
   font-weight: 700;
   font-size: 20px;
   line-height: 1;
@@ -21,11 +21,11 @@ h1 {
   vertical-align: top;
 }
 
-button + button {
+.storybook-header button + button {
   margin-left: 10px;
 }
 
-.welcome {
+.storybook-header .welcome {
   color: #333;
   font-size: 14px;
   margin-right: 10px;

code/lib/cli/rendererAssets/common/page.css

@@ -1,4 +1,4 @@
-section {
+.storybook-page {
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 24px;
@@ -8,7 +8,7 @@ section {
   color: #333;
 }
 
-section h2 {
+.storybook-page h2 {
   font-weight: 700;
   font-size: 32px;
   line-height: 1;
@@ -17,25 +17,25 @@ section h2 {
   vertical-align: top;
 }
 
-section p {
+.storybook-page p {
   margin: 1em 0;
 }
 
-section a {
+.storybook-page a {
   text-decoration: none;
   color: #1ea7fd;
 }
 
-section ul {
+.storybook-page ul {
   padding-left: 30px;
   margin: 1em 0;
 }
 
-section li {
+.storybook-page li {
   margin-bottom: 8px;
 }
 
-section .tip {
+.storybook-page .tip {
   display: inline-block;
   border-radius: 1em;
   font-size: 11px;
@@ -48,14 +48,14 @@ section .tip {
   vertical-align: top;
 }
 
-section .tip-wrapper {
+.storybook-page .tip-wrapper {
   font-size: 13px;
   line-height: 20px;
   margin-top: 40px;
   margin-bottom: 40px;
 }
 
-section .tip-wrapper svg {
+.storybook-page .tip-wrapper svg {
   display: inline-block;
   height: 12px;
   width: 12px;
@@ -64,6 +64,6 @@ section .tip-wrapper svg {
   margin-top: 3px;
 }
 
-section .tip-wrapper svg path {
+.storybook-page .tip-wrapper svg path {
   fill: #1ea7fd;
 }

code/lib/cli/src/add.ts

@@ -80,7 +80,7 @@ export async function add(
     pkgMgr = 'npm';
   }
   const packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr });
-  const packageJson = packageManager.retrievePackageJson();
+  const packageJson = await packageManager.retrievePackageJson();
   const [addonName, versionSpecifier] = getVersionSpecifier(addon);
 
   const { mainConfig, version: storybookVersion } = getStorybookInfo(packageJson);
@@ -90,7 +90,7 @@ export async function add(
   }
   const main = await readConfig(mainConfig);
   logger.log(`Verifying ${addonName}`);
-  const latestVersion = packageManager.latestVersion(addonName);
+  const latestVersion = await packageManager.latestVersion(addonName);
   if (!latestVersion) {
     logger.error(`Unknown addon ${addonName}`);
   }
@@ -100,7 +100,7 @@ export async function add(
   const version = versionSpecifier || (isStorybookAddon ? storybookVersion : latestVersion);
   const addonWithVersion = `${addonName}@${version}`;
   logger.log(`Installing ${addonWithVersion}`);
-  packageManager.addDependencies({ installAsDevDependencies: true }, [addonWithVersion]);
+  await packageManager.addDependencies({ installAsDevDependencies: true }, [addonWithVersion]);
 
   // add to main.js
   logger.log(`Adding '${addon}' to main.js addons field.`);

code/lib/cli/src/automigrate/fixes/add-react.test.ts

@@ -3,7 +3,7 @@ import { addReact } from './add-react';
 
 const checkAddReact = async (packageJson: PackageJson) => {
   const packageManager = {
-    retrievePackageJson: () => ({ dependencies: {}, devDependencies: {}, ...packageJson }),
+    retrievePackageJson: async () => ({ dependencies: {}, devDependencies: {}, ...packageJson }),
   } as JsPackageManager;
   return addReact.check({ packageManager });
 };

code/lib/cli/src/automigrate/fixes/add-react.ts

@@ -14,7 +14,7 @@ export const addReact: Fix<AddReactOptions> = {
   id: 'addReact',
 
   async check({ packageManager }) {
-    const packageJson = packageManager.retrievePackageJson();
+    const packageJson = await packageManager.retrievePackageJson();
     const installedDependencies = new Set(
       Object.keys({ ...packageJson.dependencies, ...packageJson.devDependencies })
     );
@@ -63,7 +63,10 @@ export const addReact: Fix<AddReactOptions> = {
 
   async run({ packageManager, result: { additionalDependencies }, dryRun }) {
     if (!dryRun) {
-      packageManager.addDependencies({ installAsDevDependencies: true }, additionalDependencies);
+      await packageManager.addDependencies(
+        { installAsDevDependencies: true },
+        additionalDependencies
+      );
     }
   },
 };

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

@@ -12,14 +12,14 @@ export const angularBuildersMultiproject: Fix<AngularBuildersMultiprojectRunOpti
   id: 'angular-builders-multiproject',
   promptOnly: true,
 
-  async check({ packageManager, configDir }) {
-    const packageJSON = packageManager.retrievePackageJson();
+  async check({ packageManager }) {
+    const packageJSON = await packageManager.retrievePackageJson();
 
     // Skip in case of NX
     if (isNxProject(packageJSON)) {
       return null;
     }
-    const allDependencies = packageManager.getAllDependencies();
+    const allDependencies = await packageManager.getAllDependencies();
 
     const angularVersion = allDependencies['@angular/core'];
     const angularCoerced = semver.coerce(angularVersion)?.version;

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

@@ -18,13 +18,13 @@ export const angularBuilders: Fix<AngularBuildersRunOptions> = {
   id: 'angular-builders',
 
   async check({ packageManager, configDir }) {
-    const packageJSON = packageManager.retrievePackageJson();
+    const packageJSON = await packageManager.retrievePackageJson();
 
     // Skip in case of NX
     if (isNxProject(packageJSON)) {
       return null;
     }
-    const allDependencies = packageManager.getAllDependencies();
+    const allDependencies = await packageManager.getAllDependencies();
 
     const angularVersion = allDependencies['@angular/core'];
     const angularCoerced = semver.coerce(angularVersion)?.version;
@@ -98,7 +98,7 @@ export const angularBuilders: Fix<AngularBuildersRunOptions> = {
 
     angularJSON.write();
 
-    packageManager.addScripts({
+    await packageManager.addScripts({
       storybook: `ng run ${angularProjectName}:storybook`,
       'build-storybook': `ng run ${angularProjectName}:build-storybook`,
     });

code/lib/cli/src/automigrate/fixes/angular12.ts

@@ -21,7 +21,7 @@ export const angular12: Fix<Angular12RunOptions> = {
   id: 'angular12',
 
   async check({ packageManager, configDir }) {
-    const allDependencies = packageManager.getAllDependencies();
+    const allDependencies = await packageManager.getAllDependencies();
     const angularVersion = allDependencies['@angular/core'];
     const angularCoerced = semver.coerce(angularVersion)?.version;
 

code/lib/cli/src/automigrate/fixes/builder-vite.ts

@@ -27,7 +27,7 @@ export const builderVite: Fix<BuilderViteOptions> = {
   id: 'builder-vite',
 
   async check({ configDir, packageManager }) {
-    const packageJson = packageManager.retrievePackageJson();
+    const packageJson = await packageManager.retrievePackageJson();
     const { mainConfig } = await getStorybookData({ configDir, packageManager });
     const builder = mainConfig.core?.builder;
     const builderName = typeof builder === 'string' ? builder : builder?.name;
@@ -64,12 +64,12 @@ export const builderVite: Fix<BuilderViteOptions> = {
     if (!dryRun) {
       delete dependencies['storybook-builder-vite'];
       delete devDependencies['storybook-builder-vite'];
-      packageManager.writePackageJson(packageJson);
+      await packageManager.writePackageJson(packageJson);
     }
 
     logger.info(`✅ Adding '@storybook/builder-vite' as dev dependency`);
     if (!dryRun) {
-      packageManager.addDependencies({ installAsDevDependencies: true }, [
+      await packageManager.addDependencies({ installAsDevDependencies: true }, [
         '@storybook/builder-vite',
       ]);
     }

code/lib/cli/src/automigrate/fixes/cra5.ts

@@ -21,7 +21,7 @@ export const cra5: Fix<CRA5RunOptions> = {
   id: 'cra5',
 
   async check({ packageManager, configDir }) {
-    const allDependencies = packageManager.getAllDependencies();
+    const allDependencies = await packageManager.getAllDependencies();
     const craVersion = allDependencies['react-scripts'];
     const craCoerced = semver.coerce(craVersion)?.version;
 

code/lib/cli/src/automigrate/fixes/eslint-plugin.ts

@@ -25,7 +25,7 @@ export const eslintPlugin: Fix<EslintPluginRunOptions> = {
   id: 'eslintPlugin',
 
   async check({ packageManager }) {
-    const allDependencies = packageManager.getAllDependencies();
+    const allDependencies = await packageManager.getAllDependencies();
 
     const eslintPluginStorybook = allDependencies['eslint-plugin-storybook'];
     const eslintDependency = allDependencies.eslint;
@@ -64,8 +64,9 @@ export const eslintPlugin: Fix<EslintPluginRunOptions> = {
     const deps = [`eslint-plugin-storybook`];
 
     logger.info(`✅ Adding dependencies: ${deps}`);
-    if (!dryRun)
-      packageManager.addDependencies({ installAsDevDependencies: true, skipInstall }, deps);
+    if (!dryRun) {
+      await packageManager.addDependencies({ installAsDevDependencies: true, skipInstall }, deps);
+    }
 
     if (!dryRun && unsupportedExtension) {
       logger.info(dedent`

code/lib/cli/src/automigrate/fixes/mdx-gfm.ts

@@ -81,8 +81,10 @@ export const mdxgfm: Fix<Options> = {
 
   async run({ packageManager, dryRun, mainConfigPath, skipInstall }) {
     if (!dryRun) {
-      const packageJson = packageManager.retrievePackageJson();
-      const versionToInstall = getStorybookVersionSpecifier(packageManager.retrievePackageJson());
+      const packageJson = await packageManager.retrievePackageJson();
+      const versionToInstall = getStorybookVersionSpecifier(
+        await packageManager.retrievePackageJson()
+      );
       await packageManager.addDependencies(
         { installAsDevDependencies: true, skipInstall, packageJson },
         [`@storybook/addon-mdx-gfm@${versionToInstall}`]

code/lib/cli/src/automigrate/fixes/missing-babelrc.ts

@@ -24,7 +24,7 @@ export const missingBabelRc: Fix<MissingBabelRcOptions> = {
   id: 'missing-babelrc',
 
   async check({ configDir, packageManager }) {
-    const packageJson = packageManager.retrievePackageJson();
+    const packageJson = await packageManager.retrievePackageJson();
     const { mainConfig, storybookVersion } = await getStorybookData({ configDir, packageManager });
 
     if (!semver.gte(storybookVersion, '7.0.0')) {