apply #25517 on main

code/lib/cli/package.json

@@ -91,7 +91,6 @@
     "puppeteer-core": "^2.1.1",
     "read-pkg-up": "^7.0.1",
     "semver": "^7.3.7",
-    "simple-update-notifier": "^2.0.0",
     "strip-json-comments": "^3.0.1",
     "tempy": "^1.0.1",
     "ts-dedent": "^2.0.0",

code/lib/cli/src/generators/NEXTJS/index.ts

@@ -9,7 +9,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => {
     { ...options, builder: CoreBuilder.Webpack5 },
     'react',
     {
-      extraAddons: ['@storybook/addon-onboarding'],
+      extraAddons: ['@storybook/addon-onboarding@1.0.0'],
     },
     'nextjs'
   );

code/lib/cli/src/generators/REACT/index.ts

@@ -11,7 +11,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => {
   await baseGenerator(packageManager, npmOptions, options, 'react', {
     extraPackages,
     useSWC: ({ builder }) => builder === CoreBuilder.Webpack5,
-    extraAddons: ['@storybook/addon-onboarding'],
+    extraAddons: ['@storybook/addon-onboarding@1.0.0'],
   });
 };
 

code/lib/cli/src/generators/REACT_NATIVE/index.ts

@@ -30,14 +30,14 @@ const generator = async (
     '@storybook/addon-controls@^6.5.16',
   ];
 
-  const resolvedPackages = await packageManager.getVersionedPackages(packagesToResolve);
+  const versionedPackages = await packageManager.getVersionedPackages(packagesToResolve);
 
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
 
   const packages = [
     ...babelDependencies,
     ...packagesWithFixedVersion,
-    ...resolvedPackages,
+    ...versionedPackages,
     missingReactDom && reactVersion && `react-dom@${reactVersion}`,
   ].filter(Boolean);
 

code/lib/cli/src/generators/WEBPACK_REACT/index.ts

@@ -4,7 +4,7 @@ import type { Generator } from '../types';
 
 const generator: Generator = async (packageManager, npmOptions, options) => {
   await baseGenerator(packageManager, npmOptions, options, 'react', {
-    extraAddons: ['@storybook/addon-onboarding'],
+    extraAddons: ['@storybook/addon-onboarding@1.0.0'],
     useSWC: ({ builder }) => builder === CoreBuilder.Webpack5,
   });
 };

code/lib/cli/src/generators/baseGenerator.ts

@@ -328,8 +328,6 @@ export async function baseGenerator(
   const versionedPackages = await packageManager.getVersionedPackages(packages);
   versionedPackagesSpinner.succeed();
 
-  const depsToInstall = [...versionedPackages];
-
   // Add basic babel config for a select few frameworks that need it, if they do not have a babel config file already
   if (builder !== CoreBuilder.Vite && !skipBabel) {
     const frameworksThatNeedBabelConfig = [
@@ -349,7 +347,7 @@ export async function baseGenerator(
     if (hasNoBabelFile && needsBabelConfig) {
       const isTypescript = language !== SupportedLanguage.JAVASCRIPT;
       const isReact = rendererId === 'react';
-      depsToInstall.push(
+      versionedPackages.push(
         ...getBabelPresets({
           typescript: isTypescript,
           jsx: isReact,
@@ -370,7 +368,7 @@ export async function baseGenerator(
 
       if (hasEslint && !isStorybookPluginInstalled) {
         if (skipPrompts || (await suggestESLintPlugin())) {
-          depsToInstall.push('eslint-plugin-storybook');
+          versionedPackages.push('eslint-plugin-storybook');
           await configureEslintPlugin(eslintConfigFile, packageManager);
         }
       }
@@ -379,12 +377,13 @@ export async function baseGenerator(
     // any failure regarding configuring the eslint plugin should not fail the whole generator
   }
 
-  if (depsToInstall.length > 0) {
+  if (versionedPackages.length > 0) {
     const addDependenciesSpinner = ora({
       indent: 2,
       text: 'Installing Storybook dependencies',
     }).start();
-    await packageManager.addDependencies({ ...npmOptions, packageJson }, depsToInstall);
+
+    await packageManager.addDependencies({ ...npmOptions, packageJson }, versionedPackages);
     addDependenciesSpinner.succeed();
   }
 

code/lib/cli/src/initiate.ts

@@ -9,6 +9,7 @@ import { NxProjectDetectedError } from '@storybook/core-events/server-errors';
 import dedent from 'ts-dedent';
 import boxen from 'boxen';
 import { readdirSync } from 'fs-extra';
+import { lt, prerelease } from 'semver';
 import { installableProjectTypes, ProjectType } from './project_types';
 import { detect, isStorybookInstantiated, detectLanguage, detectPnp } from './detect';
 import { commandLog, codeLog, paddedLog } from './helpers';
@@ -35,6 +36,7 @@ import { JsPackageManagerFactory, useNpmWarning } from './js-package-manager';
 import type { NpmOptions } from './NpmOptions';
 import type { CommandOptions, GeneratorOptions } from './generators/types';
 import { HandledError } from './HandledError';
+import versions from './versions';
 
 const logger = console;
 
@@ -296,15 +298,6 @@ async function doInitiate(
     cwdFolderEntries.length === 0 || cwdFolderEntries.every((entry) => entry.startsWith('.'));
 
   const packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr });
-  const welcomeMessage = 'storybook init - the simplest way to add a Storybook to your project.';
-  logger.log(chalk.inverse(`\n ${welcomeMessage} \n`));
-
-  // Update notify code.
-  const { default: updateNotifier } = await import('simple-update-notifier');
-  await updateNotifier({
-    pkg: pkg as any,
-    updateCheckInterval: 1000 * 60 * 60, // every hour (we could increase this later on.)
-  });
 
   if (options.force !== true && isEmptyDir) {
     logger.log(
@@ -317,6 +310,34 @@ async function doInitiate(
     throw new HandledError('Project was initialized in an empty directory.');
   }
 
+  const latestVersion = await packageManager.latestVersion('@storybook/cli');
+  const currentVersion = versions['@storybook/cli'];
+  const isPrerelease = prerelease(currentVersion);
+  const isOutdated = lt(currentVersion, latestVersion);
+  const borderColor = isOutdated ? '#FC521F' : '#F1618C';
+
+  const messages = {
+    welcome: `Adding Storybook version ${chalk.bold(currentVersion)} to your project..`,
+    notLatest: chalk.red(dedent`
+      This version is behind the latest release, which is: ${chalk.bold(latestVersion)}!
+      You likely ran the init command through npx, which can use a locally cached version, to get the latest please run:
+      ${chalk.bold('npx storybook@latest init')}
+      
+      You may want to CTRL+C to stop, and run with the latest version instead.
+    `),
+    prelease: chalk.yellow('This is a pre-release version.'),
+  };
+
+  logger.log(
+    boxen(
+      [messages.welcome]
+        .concat(isOutdated && !isPrerelease ? [messages.notLatest] : [])
+        .concat(isPrerelease ? [messages.prelease] : [])
+        .join('\n'),
+      { borderStyle: 'round', padding: 1, borderColor }
+    )
+  );
+
   let projectType: ProjectType;
   const projectTypeProvided = options.type;
   const infoText = projectTypeProvided

code/lib/cli/src/js-package-manager/JsPackageManager.ts

@@ -325,13 +325,29 @@ export abstract class JsPackageManager {
   /**
    * Return an array of strings matching following format: `<package_name>@<package_latest_version>`
    *
+   * For packages in the storybook monorepo, when the latest version is equal to the version of the current CLI
+   * the version is not added to the string.
+   *
+   * When a package is in the monorepo, and the version is not equal to the CLI version, the version is taken from the versions.ts file and added to the string.
+   *
    * @param packages
    */
   public getVersionedPackages(packages: string[]): Promise<string[]> {
     return Promise.all(
       packages.map(async (pkg) => {
         const [packageName, packageVersion] = getPackageDetails(pkg);
-        return `${packageName}@${await this.getVersion(packageName, packageVersion)}`;
+        const latestInRange = await this.latestVersion(packageName, packageVersion);
+
+        const k = packageName as keyof typeof storybookPackagesVersions;
+        const currentVersion = storybookPackagesVersions[k];
+
+        if (currentVersion === latestInRange) {
+          return `${packageName}`;
+        }
+        if (currentVersion) {
+          return `${packageName}@${currentVersion}`;
+        }
+        return `${packageName}@^${latestInRange}`;
       })
     );
   }

code/yarn.lock

@@ -6678,7 +6678,6 @@ __metadata:
     puppeteer-core: "npm:^2.1.1"
     read-pkg-up: "npm:^7.0.1"
     semver: "npm:^7.3.7"
-    simple-update-notifier: "npm:^2.0.0"
     slash: "npm:^5.0.0"
     strip-json-comments: "npm:^3.1.1"
     tempy: "npm:^1.0.1"
@@ -28086,15 +28085,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"simple-update-notifier@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "simple-update-notifier@npm:2.0.0"
-  dependencies:
-    semver: "npm:^7.5.3"
-  checksum: 2a00bd03bfbcbf8a737c47ab230d7920f8bfb92d1159d421bdd194479f6d01ebc995d13fbe13d45dace23066a78a3dc6642999b4e3b38b847e6664191575b20c
-  languageName: node
-  linkType: hard
-
 "sisteransi@npm:^1.0.5":
   version: 1.0.5
   resolution: "sisteransi@npm:1.0.5"