From 5c5408c52ab9d681bb600dee97a11bcc6ceaf2ad Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 2 Sep 2021 16:58:32 +0200
Subject: [PATCH] CLI: provide framework name in startup banner

the name of the framework is an important information that can be missed
by other logs, so it's nice to have it in the last log from Storybook.
---
 lib/core-server/src/build-dev.ts                        | 7 ++++++-
 lib/core-server/src/utils/output-startup-information.ts | 4 +++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/lib/core-server/src/build-dev.ts b/lib/core-server/src/build-dev.ts
index 8db98860397..7d4dffbf9a6 100644
--- a/lib/core-server/src/build-dev.ts
+++ b/lib/core-server/src/build-dev.ts
@@ -25,7 +25,7 @@ import { getManagerBuilder } from './utils/get-manager-builder';
 
 export async function buildDevStandalone(options: CLIOptions & LoadOptions & BuilderOptions) {
   const { packageJson, versionUpdates, releaseNotes } = options;
-  const { version } = packageJson;
+  const { version, name = '' } = packageJson;
 
   // updateInfo and releaseNotesData are cached, so this is typically pretty fast
   const [port, versionCheck, releaseNotesData] = await Promise.all([
@@ -110,9 +110,14 @@ export async function buildDevStandalone(options: CLIOptions & LoadOptions & Bui
     return;
   }
 
+  // Get package name and capitalize it e.g. @storybook/react -> React
+  const packageName = name.split('@storybook/').length > 0 ? name.split('@storybook/')[1] : name;
+  const frameworkName = packageName.charAt(0).toUpperCase() + packageName.slice(1);
+
   outputStartupInformation({
     updateInfo: versionCheck,
     version,
+    name: frameworkName,
     address,
     networkAddress,
     managerTotalTime,
diff --git a/lib/core-server/src/utils/output-startup-information.ts b/lib/core-server/src/utils/output-startup-information.ts
index 1190edf17d3..037725bf7b4 100644
--- a/lib/core-server/src/utils/output-startup-information.ts
+++ b/lib/core-server/src/utils/output-startup-information.ts
@@ -10,6 +10,7 @@ import { createUpdateMessage } from './update-check';
 export function outputStartupInformation(options: {
   updateInfo: VersionCheck;
   version: string;
+  name: string;
   address: string;
   networkAddress: string;
   managerTotalTime?: [number, number];
@@ -18,6 +19,7 @@ export function outputStartupInformation(options: {
   const {
     updateInfo,
     version,
+    name,
     address,
     networkAddress,
     managerTotalTime,
@@ -67,7 +69,7 @@ export function outputStartupInformation(options: {
   console.log(
     boxen(
       dedent`
-          ${colors.green(`Storybook ${chalk.bold(version)} started`)}
+          ${colors.green(`Storybook ${chalk.bold(version)} for ${chalk.bold(name)} started`)}
           ${chalk.gray(timeStatement)}
 
           ${serveMessage.toString()}${updateMessage ? `\n\n${updateMessage}` : ''}