diff --git a/code/addons/test/package.json b/code/addons/test/package.json index 4f70358b3d9a..9d288f74aa4f 100644 --- a/code/addons/test/package.json +++ b/code/addons/test/package.json @@ -77,6 +77,7 @@ "@vitest/browser": "^2.0.0", "boxen": "^8.0.1", "find-up": "^7.0.0", + "picocolors": "^1.1.0", "semver": "^7.6.3", "tinyrainbow": "^1.2.0", "ts-dedent": "^2.2.0", diff --git a/code/addons/test/src/postinstall.ts b/code/addons/test/src/postinstall.ts index 695cbf90225f..ac64b80bdc22 100644 --- a/code/addons/test/src/postinstall.ts +++ b/code/addons/test/src/postinstall.ts @@ -14,6 +14,7 @@ import { import { colors, logger } from 'storybook/internal/node-logger'; import { findUp } from 'find-up'; +import picocolors from 'picocolors'; import { coerce, satisfies } from 'semver'; import c from 'tinyrainbow'; import { dedent } from 'ts-dedent'; @@ -30,7 +31,7 @@ export default async function postInstall(options: PostinstallOptions) { printSuccess( '👋 Howdy!', dedent` - I'm the installation helper for ${colors.pink.bold(ADDON_NAME)} + I'm the installation helper for ${colors.pink(ADDON_NAME)} Hold on for a moment while I look at your project and get it set up... ` @@ -78,14 +79,14 @@ export default async function postInstall(options: PostinstallOptions) { if (!isRendererSupported) { reasons.push(dedent` - • The addon cannot yet be used with ${colors.pink.bold(info.frameworkPackageName)} + • The addon cannot yet be used with ${picocolors.bold(colors.pink(info.frameworkPackageName))} `); } if (coercedVitestVersion && !satisfies(coercedVitestVersion, '>=2.0.0')) { reasons.push(` • The addon requires Vitest 2.0.0 or later. You are currently using ${vitestVersionSpecifier}. - Please update your ${colors.pink.bold('vitest')} dependency and try again. + Please update your ${picocolors.bold(colors.pink('vitest'))} dependency and try again. `); } @@ -93,7 +94,7 @@ export default async function postInstall(options: PostinstallOptions) { const nextVersion = await packageManager.getInstalledVersion('next'); if (!nextVersion) { reasons.push(dedent` - • You are using ${colors.pink.bold('@storybook/nextjs')} without having ${colors.pink.bold('next')} installed. + • You are using ${picocolors.bold(colors.pink('@storybook/nextjs'))} without having ${picocolors.bold(colors.pink('next'))} installed. Please install "next" or use a different Storybook framework integration and try again. `); } @@ -105,7 +106,7 @@ export default async function postInstall(options: PostinstallOptions) { ); reasons.push( dedent` - To roll back the installation, remove ${colors.pink.bold(ADDON_NAME)} from the "addons" array + To roll back the installation, remove ${picocolors.bold(colors.pink(ADDON_NAME))} from the "addons" array in your main Storybook config file and remove the dependency from your package.json file. ` ); @@ -148,7 +149,7 @@ export default async function postInstall(options: PostinstallOptions) { dedent` It looks like you're using Next.js. - Adding ${colors.pink.bold(`@storybook/experimental-nextjs-vite/vite-plugin`)} so you can use it with Vitest. + Adding ${picocolors.bold(colors.pink(`@storybook/experimental-nextjs-vite/vite-plugin`))} so you can use it with Vitest. More info about the plugin at: ${c.cyan`https://github.com/storybookjs/vite-plugin-storybook-nextjs`} ` @@ -256,7 +257,7 @@ export default async function postInstall(options: PostinstallOptions) { '🚨 Oh no!', dedent` You seem to have an existing test configuration in your Vite config file: - ${colors.gray(vitestWorkspaceFile)} + ${colors.gray(vitestWorkspaceFile || '')} I was able to configure most of the addon but could not safely extend your existing workspace file automatically, you must do it yourself. This was the last step. diff --git a/code/core/package.json b/code/core/package.json index f033e363d58a..17ec07a21246 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -343,7 +343,6 @@ "browser-dtector": "^3.4.0", "camelcase": "^8.0.0", "chai": "^4.4.1", - "chalk": "^5.3.0", "cli-table3": "^0.6.1", "commander": "^12.1.0", "comment-parser": "^1.4.1", @@ -384,6 +383,7 @@ "nanoid": "^4.0.2", "npmlog": "^7.0.0", "open": "^8.4.0", + "picocolors": "^1.1.0", "picomatch": "^2.3.0", "picoquery": "^1.4.0", "polished": "^4.2.2", diff --git a/code/core/scripts/helpers/generateTypesFiles.ts b/code/core/scripts/helpers/generateTypesFiles.ts index a657c6fbd8a7..fd7a7eff789d 100644 --- a/code/core/scripts/helpers/generateTypesFiles.ts +++ b/code/core/scripts/helpers/generateTypesFiles.ts @@ -1,7 +1,7 @@ import { join, relative } from 'node:path'; import { spawn } from '../../../../scripts/prepare/tools'; -import { chalk, limit, process } from '../../../../scripts/prepare/tools'; +import { limit, picocolors, process } from '../../../../scripts/prepare/tools'; import type { getEntries } from '../entries'; export async function generateTypesFiles( @@ -69,7 +69,7 @@ export async function generateTypesFiles( console.log(index, fileName); process.exit(dtsProcess.exitCode || 1); } else { - console.log('Generated types for', chalk.cyan(relative(cwd, dtsEntries[index]))); + console.log('Generated types for', picocolors.cyan(relative(cwd, dtsEntries[index]))); } }); }) diff --git a/code/core/scripts/prep.ts b/code/core/scripts/prep.ts index df5d79f708ec..f8726e79df48 100644 --- a/code/core/scripts/prep.ts +++ b/code/core/scripts/prep.ts @@ -6,13 +6,13 @@ import { dirname, join } from 'node:path'; import type { Metafile } from 'esbuild'; import { - chalk, dedent, esbuild, globalExternals, measure, merge, nodeInternals, + picocolors, prettyTime, process, } from '../../../scripts/prepare/tools'; @@ -77,12 +77,15 @@ async function run() { types, ]); - console.log('Files generated in', chalk.yellow(prettyTime(filesTime))); - console.log('Package.json generated in', chalk.yellow(prettyTime(packageJsonTime))); - console.log(isWatch ? 'Watcher started in' : 'Bundled in', chalk.yellow(prettyTime(distTime))); + console.log('Files generated in', picocolors.yellow(prettyTime(filesTime))); + console.log('Package.json generated in', picocolors.yellow(prettyTime(packageJsonTime))); + console.log( + isWatch ? 'Watcher started in' : 'Bundled in', + picocolors.yellow(prettyTime(distTime)) + ); console.log( isOptimized ? 'Generated types in' : 'Generated type mappers in', - chalk.yellow(prettyTime(typesTime)) + picocolors.yellow(prettyTime(typesTime)) ); async function generateDistFiles() { @@ -313,7 +316,7 @@ async function run() { // show a log message when a file is compiled watch(join(cwd, 'dist'), { recursive: true }, (event, filename) => { - console.log(`compiled ${chalk.cyan(filename)}`); + console.log(`compiled ${picocolors.cyan(filename)}`); }); } else { // repo root/bench/esbuild-metafiles/core diff --git a/code/core/src/cli/bin/index.ts b/code/core/src/cli/bin/index.ts index 20cc55c1d809..060879635d61 100644 --- a/code/core/src/cli/bin/index.ts +++ b/code/core/src/cli/bin/index.ts @@ -3,10 +3,10 @@ import { addToGlobalContext } from '@storybook/core/telemetry'; import { logger } from '@storybook/core/node-logger'; -import chalk from 'chalk'; import { program } from 'commander'; import { findPackageSync } from 'fd-package-json'; import leven from 'leven'; +import picocolors from 'picocolors'; import invariant from 'tiny-invariant'; import { build } from '../build'; @@ -70,7 +70,7 @@ command('dev') ) .action(async (options) => { logger.setLevel(options.loglevel); - consoleLogger.log(chalk.bold(`${pkg.name} v${pkg.version}`) + chalk.reset('\n')); + consoleLogger.log(picocolors.bold(`${pkg.name} v${pkg.version}`) + picocolors.reset('\n')); // The key is the field created in `options` variable for // each command line argument. Value is the env variable. @@ -110,7 +110,7 @@ command('build') .action(async (options) => { process.env.NODE_ENV = process.env.NODE_ENV || 'production'; logger.setLevel(options.loglevel); - consoleLogger.log(chalk.bold(`${pkg.name} v${pkg.version}\n`)); + consoleLogger.log(picocolors.bold(`${pkg.name} v${pkg.version}\n`)); // The key is the field created in `options` variable for // each command line argument. Value is the env variable. diff --git a/code/core/src/cli/eslintPlugin.ts b/code/core/src/cli/eslintPlugin.ts index fafb91b2652a..24903afc35cd 100644 --- a/code/core/src/cli/eslintPlugin.ts +++ b/code/core/src/cli/eslintPlugin.ts @@ -6,8 +6,8 @@ import { paddedLog } from '@storybook/core/common'; import { readConfig, writeConfig } from '@storybook/core/csf-tools'; -import chalk from 'chalk'; import detectIndent from 'detect-indent'; +import picocolors from 'picocolors'; import prompts from 'prompts'; import { dedent } from 'ts-dedent'; @@ -108,7 +108,7 @@ export const suggestESLintPlugin = async (): Promise => { type: 'confirm', name: 'shouldInstall', message: dedent` - We have detected that you're using ESLint. Storybook provides a plugin that gives the best experience with Storybook and helps follow best practices: ${chalk.yellow( + We have detected that you're using ESLint. Storybook provides a plugin that gives the best experience with Storybook and helps follow best practices: ${picocolors.yellow( 'https://github.com/storybookjs/eslint-plugin-storybook#readme' )} diff --git a/code/core/src/cli/helpers.ts b/code/core/src/cli/helpers.ts index 5f567ebe5cbc..38cf6151294f 100644 --- a/code/core/src/cli/helpers.ts +++ b/code/core/src/cli/helpers.ts @@ -11,8 +11,8 @@ import { import { versions as storybookMonorepoPackages } from '@storybook/core/common'; import type { SupportedFrameworks, SupportedRenderers } from '@storybook/core/types'; -import chalk from 'chalk'; import { findUpSync } from 'find-up'; +import picocolors from 'picocolors'; import { coerce, satisfies } from 'semver'; import stripJsonComments from 'strip-json-comments'; import invariant from 'tiny-invariant'; @@ -34,7 +34,7 @@ export function readFileAsJson(jsonPath: string, allowComments?: boolean) { try { return JSON.parse(jsonContent); } catch (e) { - logger.error(chalk.red(`Invalid json in file: ${filePath}`)); + logger.error(picocolors.red(`Invalid json in file: ${filePath}`)); throw e; } } diff --git a/code/core/src/common/js-package-manager/JsPackageManager.ts b/code/core/src/common/js-package-manager/JsPackageManager.ts index 3827c6003ce2..5b0bdde0fdb6 100644 --- a/code/core/src/common/js-package-manager/JsPackageManager.ts +++ b/code/core/src/common/js-package-manager/JsPackageManager.ts @@ -2,9 +2,9 @@ import { existsSync, readFileSync } from 'node:fs'; import { readFile, writeFile } from 'node:fs/promises'; import { dirname, resolve } from 'node:path'; -import chalk from 'chalk'; import type { CommonOptions } from 'execa'; import { execaCommand, execaCommandSync } from 'execa'; +import picocolors from 'picocolors'; import { gt, satisfies } from 'semver'; import invariant from 'tiny-invariant'; import { dedent } from 'ts-dedent'; @@ -384,11 +384,11 @@ export abstract class JsPackageManager { latest = await this.latestVersion(packageName, constraint); } catch (e) { if (current) { - logger.warn(`\n ${chalk.yellow(String(e))}`); + logger.warn(`\n ${picocolors.yellow(String(e))}`); return current; } - logger.error(`\n ${chalk.red(String(e))}`); + logger.error(`\n ${picocolors.red(String(e))}`); throw new HandledError(e); } diff --git a/code/core/src/common/utils/log-config.ts b/code/core/src/common/utils/log-config.ts index 5d50f0285298..aab43e9b29ec 100644 --- a/code/core/src/common/utils/log-config.ts +++ b/code/core/src/common/utils/log-config.ts @@ -1,6 +1,6 @@ -import chalk from 'chalk'; +import picocolors from 'picocolors'; export function logConfig(caption: unknown, config: unknown) { - console.log(chalk.cyan(caption)); + console.log(picocolors.cyan(String(caption))); console.dir(config, { depth: null }); } diff --git a/code/core/src/common/utils/log.ts b/code/core/src/common/utils/log.ts index 43119e616b24..3f7e8d51cb72 100644 --- a/code/core/src/common/utils/log.ts +++ b/code/core/src/common/utils/log.ts @@ -1,15 +1,15 @@ -import chalk from 'chalk'; +import picocolors from 'picocolors'; const logger = console; export const commandLog = (message: string) => { - process.stdout.write(chalk.cyan(' • ') + message); + process.stdout.write(picocolors.cyan(' • ') + message); // Need `void` to be able to use this function in a then of a Promise return (errorMessage?: string | void, errorInfo?: string) => { if (errorMessage) { - process.stdout.write(`. ${chalk.red('✖')}\n`); - logger.error(`\n ${chalk.red(errorMessage)}`); + process.stdout.write(`. ${picocolors.red('✖')}\n`); + logger.error(`\n ${picocolors.red(errorMessage)}`); if (!errorInfo) { return; @@ -17,13 +17,13 @@ export const commandLog = (message: string) => { const newErrorInfo = errorInfo .split('\n') - .map((line) => ` ${chalk.dim(line)}`) + .map((line) => ` ${picocolors.dim(line)}`) .join('\n'); logger.error(`${newErrorInfo}\n`); return; } - process.stdout.write(`. ${chalk.green('✓')}\n`); + process.stdout.write(`. ${picocolors.green('✓')}\n`); }; }; @@ -56,7 +56,7 @@ export function codeLog(codeLines: string[], leftPadAmount?: number) { .map((line) => { const rightPadAmount = maxLength - line.length; let newLine = line + getChars(' ', rightPadAmount); - newLine = getChars(' ', leftPadAmount || 2) + chalk.inverse(` ${newLine} `); + newLine = getChars(' ', leftPadAmount || 2) + picocolors.inverse(` ${newLine} `); return newLine; }) .join('\n'); diff --git a/code/core/src/common/utils/notify-telemetry.ts b/code/core/src/common/utils/notify-telemetry.ts index bb39028dedeb..4857fba0631b 100644 --- a/code/core/src/common/utils/notify-telemetry.ts +++ b/code/core/src/common/utils/notify-telemetry.ts @@ -1,4 +1,4 @@ -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { cache } from './cache'; @@ -19,14 +19,14 @@ export const notifyTelemetry = async () => { cache.set(TELEMETRY_KEY_NOTIFY_DATE, Date.now().toString()); logger.log( - `${chalk.magenta.bold( - 'Attention' + `${picocolors.magenta( + picocolors.bold('Attention') )}: Storybook now collects completely anonymous telemetry regarding usage.` ); logger.log(`This information is used to shape Storybook's roadmap and prioritize features.`); logger.log( `You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:` ); - logger.log(chalk.cyan('https://storybook.js.org/telemetry')); + logger.log(picocolors.cyan('https://storybook.js.org/telemetry')); logger.log(); }; diff --git a/code/core/src/core-server/build-static.ts b/code/core/src/core-server/build-static.ts index 45ba7c7bc6d3..8d8d5f9cce60 100644 --- a/code/core/src/core-server/build-static.ts +++ b/code/core/src/core-server/build-static.ts @@ -16,7 +16,7 @@ import { global } from '@storybook/global'; import { logger } from '@storybook/core/node-logger'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { StoryIndexGenerator } from './utils/StoryIndexGenerator'; import { buildOrThrow } from './utils/build-or-throw'; @@ -41,7 +41,9 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption options.outputDir = resolve(options.outputDir); options.configDir = resolve(options.configDir); - logger.info(`=> Cleaning outputDir: ${chalk.cyan(relative(process.cwd(), options.outputDir))}`); + logger.info( + `=> Cleaning outputDir: ${picocolors.cyan(relative(process.cwd(), options.outputDir))}` + ); if (options.outputDir === '/') { throw new Error("Won't remove directory '/'. Check your outputDir!"); } diff --git a/code/core/src/core-server/utils/StoryIndexGenerator.ts b/code/core/src/core-server/utils/StoryIndexGenerator.ts index fb2a0f4b887c..aed65a46bf6b 100644 --- a/code/core/src/core-server/utils/StoryIndexGenerator.ts +++ b/code/core/src/core-server/utils/StoryIndexGenerator.ts @@ -23,8 +23,8 @@ import { getStorySortParameter, loadConfig } from '@storybook/core/csf-tools'; import { logger, once } from '@storybook/core/node-logger'; import { sortStoriesV7, userOrAutoTitleFromSpecifier } from '@storybook/core/preview-api'; -import chalk from 'chalk'; import { findUp } from 'find-up'; +import picocolors from 'picocolors'; import slash from 'slash'; import invariant from 'tiny-invariant'; import { dedent } from 'ts-dedent'; @@ -140,7 +140,7 @@ export class StoryIndexGenerator { if (files.length === 0) { once.warn( - `No story files found for the specified pattern: ${chalk.blue( + `No story files found for the specified pattern: ${picocolors.blue( join(specifier.directory, specifier.files) )}` ); @@ -527,7 +527,7 @@ export class StoryIndexGenerator { } catch (err) { if (err && (err as { source: any }).source?.match(/mdast-util-mdx-jsx/g)) { logger.warn( - `💡 This seems to be an MDX2 syntax error. Please refer to the MDX section in the following resource for assistance on how to fix this: ${chalk.yellow( + `💡 This seems to be an MDX2 syntax error. Please refer to the MDX section in the following resource for assistance on how to fix this: ${picocolors.yellow( 'https://storybook.js.org/migration-guides/7.0' )}` ); diff --git a/code/core/src/core-server/utils/copy-all-static-files.ts b/code/core/src/core-server/utils/copy-all-static-files.ts index 66a0194cfd94..ba5ccac883c8 100644 --- a/code/core/src/core-server/utils/copy-all-static-files.ts +++ b/code/core/src/core-server/utils/copy-all-static-files.ts @@ -5,7 +5,7 @@ import { getDirectoryFromWorkingDir } from '@storybook/core/common'; import { logger } from '@storybook/core/node-logger'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { parseStaticDir } from './server-statics'; @@ -19,8 +19,8 @@ export async function copyAllStaticFiles(staticDirs: any[] | undefined, outputDi // we copy prebuild static files from node_modules/@storybook/manager & preview if (!staticDir.includes('node_modules')) { - const from = chalk.cyan(print(staticDir)); - const to = chalk.cyan(print(targetDir)); + const from = picocolors.cyan(print(staticDir)); + const to = picocolors.cyan(print(targetDir)); logger.info(`=> Copying static files: ${from} => ${to}`); } @@ -66,7 +66,7 @@ export async function copyAllStaticFilesRelativeToMain( const skipPaths = ['index.html', 'iframe.html'].map((f) => join(targetPath, f)); if (!from.includes('node_modules')) { logger.info( - `=> Copying static files: ${chalk.cyan(print(from))} at ${chalk.cyan(print(targetPath))}` + `=> Copying static files: ${picocolors.cyan(print(from))} at ${picocolors.cyan(print(targetPath))}` ); } await cp(from, targetPath, { diff --git a/code/core/src/core-server/utils/output-startup-information.ts b/code/core/src/core-server/utils/output-startup-information.ts index cfe60bef6cc9..411e3e80be46 100644 --- a/code/core/src/core-server/utils/output-startup-information.ts +++ b/code/core/src/core-server/utils/output-startup-information.ts @@ -3,8 +3,8 @@ import type { VersionCheck } from '@storybook/core/types'; import { colors } from '@storybook/core/node-logger'; import boxen from 'boxen'; -import chalk from 'chalk'; import Table from 'cli-table3'; +import picocolors from 'picocolors'; import prettyTime from 'pretty-hrtime'; import { dedent } from 'ts-dedent'; @@ -50,13 +50,13 @@ export function outputStartupInformation(options: { }); serveMessage.push( - ['Local:', chalk.cyan(address)], - ['On your network:', chalk.cyan(networkAddress)] + ['Local:', picocolors.cyan(address)], + ['On your network:', picocolors.cyan(networkAddress)] ); const timeStatement = [ - managerTotalTime && `${chalk.underline(prettyTime(managerTotalTime))} for manager`, - previewTotalTime && `${chalk.underline(prettyTime(previewTotalTime))} for preview`, + managerTotalTime && `${picocolors.underline(prettyTime(managerTotalTime))} for manager`, + previewTotalTime && `${picocolors.underline(prettyTime(previewTotalTime))} for preview`, ] .filter(Boolean) .join(' and '); @@ -64,8 +64,10 @@ export function outputStartupInformation(options: { console.log( boxen( dedent` - ${colors.green(`Storybook ${chalk.bold(version)} for ${chalk.bold(name)} started`)} - ${chalk.gray(timeStatement)} + ${colors.green( + `Storybook ${picocolors.bold(version)} for ${picocolors.bold(name)} started` + )} + ${picocolors.gray(timeStatement)} ${serveMessage.toString()}${updateMessage ? `\n\n${updateMessage}` : ''} `, diff --git a/code/core/src/core-server/utils/output-stats.ts b/code/core/src/core-server/utils/output-stats.ts index 1d5047862247..24c736147f1e 100644 --- a/code/core/src/core-server/utils/output-stats.ts +++ b/code/core/src/core-server/utils/output-stats.ts @@ -6,16 +6,16 @@ import type { Stats } from '@storybook/core/types'; import { logger } from '@storybook/core/node-logger'; import { stringifyStream } from '@discoveryjs/json-ext'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; export async function outputStats(directory: string, previewStats?: any, managerStats?: any) { if (previewStats) { const filePath = await writeStats(directory, 'preview', previewStats as Stats); - logger.info(`=> preview stats written to ${chalk.cyan(filePath)}`); + logger.info(`=> preview stats written to ${picocolors.cyan(filePath)}`); } if (managerStats) { const filePath = await writeStats(directory, 'manager', managerStats as Stats); - logger.info(`=> manager stats written to ${chalk.cyan(filePath)}`); + logger.info(`=> manager stats written to ${picocolors.cyan(filePath)}`); } } diff --git a/code/core/src/core-server/utils/server-statics.ts b/code/core/src/core-server/utils/server-statics.ts index edd1a4f45fb2..b6bc406923e8 100644 --- a/code/core/src/core-server/utils/server-statics.ts +++ b/code/core/src/core-server/utils/server-statics.ts @@ -6,9 +6,9 @@ import type { Options } from '@storybook/core/types'; import { logger } from '@storybook/core/node-logger'; -import chalk from 'chalk'; import type { Router } from 'express'; import express from 'express'; +import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; export async function useStatics(router: Router, options: Options) { @@ -36,7 +36,7 @@ export async function useStatics(router: Router, options: Options) { // Don't log for the internal static dir if (!targetEndpoint.startsWith('/sb-')) { logger.info( - `=> Serving static files from ${chalk.cyan(staticDir)} at ${chalk.cyan(targetEndpoint)}` + `=> Serving static files from ${picocolors.cyan(staticDir)} at ${picocolors.cyan(targetEndpoint)}` ); } @@ -72,7 +72,7 @@ export const parseStaticDir = async (arg: string) => { if (!existsSync(staticPath)) { throw new Error( dedent` - Failed to load static files, no such directory: ${chalk.cyan(staticPath)} + Failed to load static files, no such directory: ${picocolors.cyan(staticPath)} Make sure this directory exists. ` ); diff --git a/code/core/src/core-server/utils/update-check.ts b/code/core/src/core-server/utils/update-check.ts index 4d1fe03c685c..efdd6ba95510 100644 --- a/code/core/src/core-server/utils/update-check.ts +++ b/code/core/src/core-server/utils/update-check.ts @@ -3,7 +3,7 @@ import type { VersionCheck } from '@storybook/core/types'; import { colors } from '@storybook/core/node-logger'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import semver from 'semver'; import { dedent } from 'ts-dedent'; @@ -44,13 +44,13 @@ export function createUpdateMessage(updateInfo: VersionCheck, version: string): updateInfo.success && semver.lt(version, updateInfo.data.latest.version) ? dedent` ${colors.orange( - `A new version (${chalk.bold(updateInfo.data.latest.version)}) is available!` + `A new version (${picocolors.bold(updateInfo.data.latest.version)}) is available!` )} - ${chalk.gray('Upgrade now:')} ${colors.green(upgradeCommand)} + ${picocolors.gray('Upgrade now:')} ${colors.green(upgradeCommand)} - ${chalk.gray('Read full changelog:')} ${chalk.gray.underline( - 'https://github.com/storybookjs/storybook/blob/main/CHANGELOG.md' + ${picocolors.gray('Read full changelog:')} ${picocolors.gray( + picocolors.underline('https://github.com/storybookjs/storybook/blob/main/CHANGELOG.md') )} ` : ''; diff --git a/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts b/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts index d8fa4dcc521c..ea28dbfc9c00 100644 --- a/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts +++ b/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts @@ -5,7 +5,7 @@ import type { StorybookConfig } from '@storybook/core/types'; import { babelParse } from '@storybook/core/csf-tools'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; export async function warnWhenUsingArgTypesRegex( @@ -34,17 +34,17 @@ export async function warnWhenUsingArgTypesRegex( Identifier: (path) => { if (path.node.name === 'argTypesRegex') { const message = dedent` - ${chalk.bold('Attention')}: We've detected that you're using ${chalk.cyan( + ${picocolors.bold('Attention')}: We've detected that you're using ${picocolors.cyan( 'actions.argTypesRegex' )} together with the visual test addon: ${path.buildCodeFrameError(previewConfigPath).message} - We recommend removing the ${chalk.cyan( + We recommend removing the ${picocolors.cyan( 'argTypesRegex' - )} and assigning explicit action with the ${chalk.cyan( + )} and assigning explicit action with the ${picocolors.cyan( 'fn' - )} function from ${chalk.cyan('@storybook/test')} instead: + )} function from ${picocolors.cyan('@storybook/test')} instead: https://storybook.js.org/docs/essentials/actions#via-storybooktest-fn-spy-function The build used by the addon for snapshot testing doesn't take the regex into account, which can cause hard to debug problems when a snapshot depends on the presence of action props. diff --git a/code/core/src/node-logger/index.ts b/code/core/src/node-logger/index.ts index 1a8abc242d25..7235ceff3751 100644 --- a/code/core/src/node-logger/index.ts +++ b/code/core/src/node-logger/index.ts @@ -1,5 +1,4 @@ /// -import chalk from 'chalk'; import npmLog from 'npmlog'; import prettyTime from 'pretty-hrtime'; @@ -7,14 +6,34 @@ import prettyTime from 'pretty-hrtime'; // there are issues with the build: https://github.com/storybookjs/storybook/issues/14621 npmLog.stream = process.stdout; +function hex(hexColor: string) { + // Ensure the hex color is 6 characters long and starts with '#' + if (!/^#?[0-9A-Fa-f]{6}$/.test(hexColor)) { + throw new Error('Invalid hex color. It must be a 6-character hex code.'); + } + + // Remove the leading '#' if it exists + if (hexColor.startsWith('#')) { + hexColor = hexColor.slice(1); + } + + // Convert hex to RGB + const r = parseInt(hexColor.slice(0, 2), 16); + const g = parseInt(hexColor.slice(2, 4), 16); + const b = parseInt(hexColor.slice(4, 6), 16); + + // Return the ANSI escape sequence for the given RGB color + return (text: string) => `\x1b[38;2;${r};${g};${b}m${text}\x1b[39m`; +} + export const colors = { - pink: chalk.hex('F1618C'), - purple: chalk.hex('B57EE5'), - orange: chalk.hex('F3AD38'), - green: chalk.hex('A2E05E'), - blue: chalk.hex('6DABF5'), - red: chalk.hex('F16161'), - gray: chalk.gray, + pink: hex('#F1618C'), + purple: hex('#B57EE5'), + orange: hex('#F3AD38'), + green: hex('#A2E05E'), + blue: hex('#6DABF5'), + red: hex('#F16161'), + gray: hex('#B8C2CC'), }; export const logger = { @@ -40,7 +59,7 @@ export const logger = { console.log( msg - .replace(message.toString(), chalk.red(message.toString())) + .replace(message.toString(), colors.red(message.toString())) .replaceAll(process.cwd(), '.') ); } diff --git a/code/core/src/server-errors.ts b/code/core/src/server-errors.ts index 7160087cdfb6..5df2a3df9667 100644 --- a/code/core/src/server-errors.ts +++ b/code/core/src/server-errors.ts @@ -1,4 +1,4 @@ -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; import { StorybookError } from './storybook-error'; @@ -349,21 +349,21 @@ export class MainFileESMOnlyImportError extends StorybookError { ]; if (data.line) { message.push( - chalk.white( - `In your ${chalk.yellow(data.location)} file, line ${chalk.bold.cyan( - data.num + picocolors.white( + `In your ${picocolors.yellow(data.location)} file, line ${picocolors.bold( + picocolors.cyan(data.num) )} threw an error:` ), - chalk.grey(data.line) + picocolors.gray(data.line) ); } message.push( '', - chalk.white( - `Convert the static import to a dynamic import ${chalk.underline('where they are used')}.` + picocolors.white( + `Convert the static import to a dynamic import ${picocolors.underline('where they are used')}.` ), - chalk.white(`Example:`) + ' ' + chalk.gray(`await import();`), + picocolors.white(`Example:`) + ' ' + picocolors.gray(`await import();`), '' ); @@ -398,7 +398,7 @@ export class MainFileMissingError extends StorybookError { code: 6, documentation, message: dedent` - No configuration files have been found in your configDir: ${chalk.yellow(data.location)}. + No configuration files have been found in your configDir: ${picocolors.yellow(data.location)}. Storybook needs a "main.js" file, please add it. ${helperMessage}`, @@ -408,7 +408,7 @@ export class MainFileMissingError extends StorybookError { export class MainFileEvaluationError extends StorybookError { constructor(public data: { location: string; error: Error }) { - const errorText = chalk.white( + const errorText = picocolors.white( (data.error.stack || data.error.message).replaceAll(process.cwd(), '') ); @@ -416,7 +416,7 @@ export class MainFileEvaluationError extends StorybookError { category: Category.CORE_SERVER, code: 7, message: dedent` - Storybook couldn't evaluate your ${chalk.yellow(data.location)} file. + Storybook couldn't evaluate your ${picocolors.yellow(data.location)} file. Original error: ${errorText}`, diff --git a/code/core/src/telemetry/notify.ts b/code/core/src/telemetry/notify.ts index 171d48ae671f..a6cf3e5b8b51 100644 --- a/code/core/src/telemetry/notify.ts +++ b/code/core/src/telemetry/notify.ts @@ -1,6 +1,6 @@ import { cache } from '@storybook/core/common'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; const TELEMETRY_KEY_NOTIFY_DATE = 'telemetry-notification-date'; @@ -20,14 +20,14 @@ export const notify = async () => { logger.log(); logger.log( - `${chalk.magenta.bold( - 'attention' + `${picocolors.magenta( + picocolors.bold('attention') )} => Storybook now collects completely anonymous telemetry regarding usage.` ); logger.log(`This information is used to shape Storybook's roadmap and prioritize features.`); logger.log( `You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:` ); - logger.log(chalk.cyan('https://storybook.js.org/telemetry')); + logger.log(picocolors.cyan('https://storybook.js.org/telemetry')); logger.log(); }; diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index 9b5b82062ddf..f7c850c8cb46 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -44,7 +44,6 @@ "@babel/types": "^7.24.0", "@storybook/codemod": "workspace:*", "@types/semver": "^7.3.4", - "chalk": "^4.1.0", "commander": "^12.1.0", "create-storybook": "workspace:*", "cross-spawn": "^7.0.3", @@ -66,6 +65,7 @@ "@types/cross-spawn": "^6.0.2", "@types/prompts": "^2.0.9", "boxen": "^7.1.1", + "picocolors": "^1.1.0", "slash": "^5.0.0", "strip-ansi": "^7.1.0", "typescript": "^5.3.2" diff --git a/code/lib/cli-storybook/src/autoblock/block-dependencies-versions.ts b/code/lib/cli-storybook/src/autoblock/block-dependencies-versions.ts index 49ebdbb54318..1bc9bdc7fca6 100644 --- a/code/lib/cli-storybook/src/autoblock/block-dependencies-versions.ts +++ b/code/lib/cli-storybook/src/autoblock/block-dependencies-versions.ts @@ -1,4 +1,4 @@ -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { lt } from 'semver'; import { dedent } from 'ts-dedent'; @@ -52,7 +52,7 @@ export const blocker = createBlocker({ return dedent` Support for react-script < 5.0.0 has been removed. Please see the migration guide for more information: - ${chalk.yellow( + ${picocolors.yellow( 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#create-react-app-dropped-cra4-support' )} @@ -62,7 +62,7 @@ export const blocker = createBlocker({ return dedent` Support for Vue 2 has been removed. Please see the migration guide for more information: - ${chalk.yellow('https://v3-migration.vuejs.org/')} + ${picocolors.yellow('https://v3-migration.vuejs.org/')} Please upgrade to the latest version of Vue. `; @@ -70,7 +70,7 @@ export const blocker = createBlocker({ return dedent` Support for Angular < 15 has been removed. Please see the migration guide for more information: - ${chalk.yellow('https://angular.io/guide/update-to-version-15')} + ${picocolors.yellow('https://angular.io/guide/update-to-version-15')} Please upgrade to the latest version of Angular. `; @@ -78,7 +78,7 @@ export const blocker = createBlocker({ return dedent` Support for Next.js < 13.5 has been removed. Please see the migration guide for more information: - ${chalk.yellow( + ${picocolors.yellow( 'https://nextjs.org/docs/pages/building-your-application/upgrading/version-13' )} diff --git a/code/lib/cli-storybook/src/autoblock/block-node-version.ts b/code/lib/cli-storybook/src/autoblock/block-node-version.ts index 6c4340c38dad..850b4b460d3a 100644 --- a/code/lib/cli-storybook/src/autoblock/block-node-version.ts +++ b/code/lib/cli-storybook/src/autoblock/block-node-version.ts @@ -1,4 +1,4 @@ -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { lt } from 'semver'; import { dedent } from 'ts-dedent'; @@ -18,7 +18,7 @@ export const blocker = createBlocker({ We've detected you're using Node.js v${data.nodeVersion}. Storybook needs Node.js 18 or higher. - ${chalk.yellow('https://nodejs.org/en/download')} + ${picocolors.yellow('https://nodejs.org/en/download')} `; }, }); diff --git a/code/lib/cli-storybook/src/autoblock/block-storystorev6.ts b/code/lib/cli-storybook/src/autoblock/block-storystorev6.ts index 7904c39ae33f..9d28b8d15a08 100644 --- a/code/lib/cli-storybook/src/autoblock/block-storystorev6.ts +++ b/code/lib/cli-storybook/src/autoblock/block-storystorev6.ts @@ -1,6 +1,6 @@ import type { StorybookConfigRaw } from 'storybook/internal/types'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; import { createBlocker } from './types'; @@ -22,7 +22,7 @@ export const blocker = createBlocker({ StoryStoreV7 feature must be removed from your Storybook configuration. This feature was removed in Storybook 8.0.0. Please see the migration guide for more information: - ${chalk.yellow( + ${picocolors.yellow( 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev6-and-storiesof-is-deprecated' )} @@ -30,7 +30,7 @@ export const blocker = createBlocker({ export default = { features: { - ${chalk.cyan(`storyStoreV7: false`)}, <--- ${chalk.bold('remove this line')} + ${picocolors.cyan(`storyStoreV7: false`)}, <--- ${picocolors.bold('remove this line')} }, }; diff --git a/code/lib/cli-storybook/src/autoblock/index.ts b/code/lib/cli-storybook/src/autoblock/index.ts index a09d1b60477f..5e61a8042582 100644 --- a/code/lib/cli-storybook/src/autoblock/index.ts +++ b/code/lib/cli-storybook/src/autoblock/index.ts @@ -1,7 +1,7 @@ import { logger } from 'storybook/internal/node-logger'; import boxen from 'boxen'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import type { AutoblockOptions, Blocker } from './types'; @@ -49,7 +49,9 @@ export const autoblock = async ( if (faults.length > 0) { const messages = { welcome: `Storybook has found potential blockers in your project that need to be resolved before upgrading:`, - reminder: chalk.yellow('Fix the above issues and try running the upgrade command again.'), + reminder: picocolors.yellow( + 'Fix the above issues and try running the upgrade command again.' + ), }; const borderColor = '#FC521F'; diff --git a/code/lib/cli-storybook/src/automigrate/fixes/addon-postcss.ts b/code/lib/cli-storybook/src/automigrate/fixes/addon-postcss.ts index 130ac71d38d2..d8bd135da2f9 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/addon-postcss.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/addon-postcss.ts @@ -1,4 +1,4 @@ -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; import { getAddonNames } from '../helpers/mainConfigFile'; @@ -28,13 +28,13 @@ export const addonPostCSS: Fix = { prompt() { return dedent` - ${chalk.bold( + ${picocolors.bold( 'Attention' )}: We've detected that you're using the following package which is incompatible with Storybook 8 and beyond: - - ${chalk.cyan(`@storybook/addon-postcss`)} + - ${picocolors.cyan(`@storybook/addon-postcss`)} - Please migrate to ${chalk.cyan( + Please migrate to ${picocolors.cyan( `@storybook/addon-styling-webpack` )} once you're done upgrading. `; diff --git a/code/lib/cli-storybook/src/automigrate/fixes/addons-api.ts b/code/lib/cli-storybook/src/automigrate/fixes/addons-api.ts index f014b331c064..b0236fcf82a7 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/addons-api.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/addons-api.ts @@ -1,4 +1,4 @@ -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; import type { Fix } from '../types'; @@ -27,18 +27,18 @@ export const addonsAPI: Fix = { prompt() { return dedent` - ${chalk.bold( + ${picocolors.bold( 'Attention' )}: We've detected that you're using the following package which is removed in Storybook 8 and beyond: - - ${chalk.cyan(`@storybook/addons`)} + - ${picocolors.cyan(`@storybook/addons`)} - This package has been deprecated and replaced with ${chalk.cyan( + This package has been deprecated and replaced with ${picocolors.cyan( `@storybook/preview-api` - )} and ${chalk.cyan(`@storybook/manager-api`)}. + )} and ${picocolors.cyan(`@storybook/manager-api`)}. You can find more information about the new addons API in the migration guide: - ${chalk.yellow( + ${picocolors.yellow( 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-addons-api' )} `; diff --git a/code/lib/cli-storybook/src/automigrate/fixes/angular-builders-multiproject.ts b/code/lib/cli-storybook/src/automigrate/fixes/angular-builders-multiproject.ts index 182ab521942b..dad252bcf42d 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/angular-builders-multiproject.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/angular-builders-multiproject.ts @@ -1,6 +1,6 @@ import { AngularJSON, isNxProject } from 'storybook/internal/cli'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import semver from 'semver'; import { dedent } from 'ts-dedent'; @@ -47,13 +47,13 @@ export const angularBuildersMultiproject: Fix:storybook')} to start Storybook. + )} and execute ${picocolors.yellow('ng run :storybook')} to start Storybook. - ❌ Your Angular workspace uses multiple projects defined in the ${chalk.yellow( + ❌ Your Angular workspace uses multiple projects defined in the ${picocolors.yellow( 'angular.json' - )} file and we were not able to detect a root project. Therefore we are not able to automigrate to use Angular Storybook builder. Instead, please visit ${chalk.yellow( + )} file and we were not able to detect a root project. Therefore we are not able to automigrate to use Angular Storybook builder. Instead, please visit ${picocolors.yellow( 'https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular' )} to do the migration manually. `; diff --git a/code/lib/cli-storybook/src/automigrate/fixes/angular-builders.ts b/code/lib/cli-storybook/src/automigrate/fixes/angular-builders.ts index 80eccbc1f046..30798fe53335 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/angular-builders.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/angular-builders.ts @@ -2,7 +2,7 @@ import { AngularJSON, isNxProject } from 'storybook/internal/cli'; import type { JsPackageManager } from 'storybook/internal/common'; import type { StorybookConfig } from 'storybook/internal/types'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import prompts from 'prompts'; import { dedent } from 'ts-dedent'; @@ -60,7 +60,7 @@ export const angularBuilders: Fix = { Also feel free to remove the Compodoc script from your package.json file if you don't use it apart from Storybook anymore. Storybook uses Compodoc internally and you don't have to call in separately anymore. - Read more about the Angular builder here: ${chalk.yellow( + Read more about the Angular builder here: ${picocolors.yellow( 'https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular#how-do-i-migrate-to-an-angular-storybook-builder' )} `; diff --git a/code/lib/cli-storybook/src/automigrate/fixes/autodocs-tags.ts b/code/lib/cli-storybook/src/automigrate/fixes/autodocs-tags.ts index ebfbf45213a6..30d5c9a5ed8e 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/autodocs-tags.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/autodocs-tags.ts @@ -1,7 +1,7 @@ import { readConfig, writeConfig } from 'storybook/internal/csf-tools'; import type { DocsOptions } from 'storybook/internal/types'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; import { updateMainConfig } from '../helpers/mainConfigFile'; @@ -30,13 +30,13 @@ export const autodocsTags: Fix = { if (autodocs === true && !previewConfigPath) { throw Error(dedent` - ❌ Failed to remove the deprecated ${chalk.cyan('docs.autodocs')} setting from ${chalk.cyan( - mainConfigPath - )}. + ❌ Failed to remove the deprecated ${picocolors.cyan( + 'docs.autodocs' + )} setting from ${picocolors.cyan(mainConfigPath)}. - There is no preview config file in which to add the ${chalk.cyan('autodocs')} tag. + There is no preview config file in which to add the ${picocolors.cyan('autodocs')} tag. - Please perform the migration by hand: ${chalk.yellow(MIGRATION)} + Please perform the migration by hand: ${picocolors.yellow(MIGRATION)} `); return null; } @@ -52,21 +52,23 @@ export const autodocsTags: Fix = { falseMessage = dedent` - There is no ${chalk.cyan('docs.autodocs = false')} equivalent. - You'll need to check your stories to ensure none are tagged with ${chalk.cyan('autodocs')}. + There is no ${picocolors.cyan('docs.autodocs = false')} equivalent. + You'll need to check your stories to ensure none are tagged with ${picocolors.cyan( + 'autodocs' + )}. `; } else if (autodocs === true) { - trueMessage = ` and update ${chalk.cyan(previewConfigPath)}`; + trueMessage = ` and update ${picocolors.cyan(previewConfigPath)}`; } return dedent` - The ${chalk.cyan('docs.autodocs')} setting in ${chalk.cyan( + The ${picocolors.cyan('docs.autodocs')} setting in ${picocolors.cyan( mainConfigPath )} is deprecated.${falseMessage} - Learn more: ${chalk.yellow(MIGRATION)} + Learn more: ${picocolors.yellow(MIGRATION)} - Remove ${chalk.cyan('docs.autodocs')}${trueMessage}? + Remove ${picocolors.cyan('docs.autodocs')}${trueMessage}? `; }, diff --git a/code/lib/cli-storybook/src/automigrate/fixes/autodocs-true.ts b/code/lib/cli-storybook/src/automigrate/fixes/autodocs-true.ts index 5f3dc66a899d..9ed1aa6b06ed 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/autodocs-true.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/autodocs-true.ts @@ -1,4 +1,4 @@ -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; import { updateMainConfig } from '../helpers/mainConfigFile'; @@ -42,7 +42,9 @@ export const autodocsTrue: Fix = { }, prompt({ value }) { - const autodocsFormatted = chalk.cyan(`docs: { autodocs: ${JSON.stringify(value ?? true)} }`); + const autodocsFormatted = picocolors.cyan( + `docs: { autodocs: ${JSON.stringify(value ?? true)} }` + ); const tagWarning = dedent` NOTE: if you're upgrading from an older 7.0-beta using the 'docsPage' tag, please update your story files to use the 'autodocs' tag instead. @@ -59,7 +61,7 @@ export const autodocsTrue: Fix = { ${autodocsFormatted} ${value === 'tag' ? tagWarning : ''} - More info: ${chalk.yellow( + More info: ${picocolors.yellow( 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes' )} `; @@ -72,7 +74,7 @@ export const autodocsTrue: Fix = { ${autodocsFormatted} - More info: ${chalk.yellow( + More info: ${picocolors.yellow( 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes' )} `; diff --git a/code/lib/cli-storybook/src/automigrate/fixes/builder-vite.ts b/code/lib/cli-storybook/src/automigrate/fixes/builder-vite.ts index 0f3e7714edee..258d033d8649 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/builder-vite.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/builder-vite.ts @@ -2,7 +2,7 @@ import { getStorybookVersionSpecifier } from 'storybook/internal/cli'; import { writeConfig } from 'storybook/internal/csf-tools'; import type { PackageJson } from 'storybook/internal/types'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; import { updateMainConfig } from '../helpers/mainConfigFile'; @@ -42,18 +42,18 @@ export const builderVite: Fix = { }, prompt({ builder }) { - const builderFormatted = chalk.cyan(JSON.stringify(builder, null, 2)); + const builderFormatted = picocolors.cyan(JSON.stringify(builder, null, 2)); return dedent` We've detected you're using the community vite builder: ${builderFormatted} - 'storybook-builder-vite' is deprecated and now located at ${chalk.cyan( + 'storybook-builder-vite' is deprecated and now located at ${picocolors.cyan( '@storybook/builder-vite' )}. We can upgrade your project to use the new builder automatically. - More info: ${chalk.yellow( + More info: ${picocolors.yellow( 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#vite-builder-renamed' )} `; diff --git a/code/lib/cli-storybook/src/automigrate/fixes/cra5.ts b/code/lib/cli-storybook/src/automigrate/fixes/cra5.ts index 968b24cb4985..26904460664a 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/cra5.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/cra5.ts @@ -1,4 +1,4 @@ -import chalk from 'chalk'; +import picocolors from 'picocolors'; import semver from 'semver'; import { dedent } from 'ts-dedent'; @@ -36,17 +36,17 @@ export const cra5: Fix = { }, prompt({ craVersion }) { - const craFormatted = chalk.cyan(`Create React App (CRA) ${craVersion}`); + const craFormatted = picocolors.cyan(`Create React App (CRA) ${craVersion}`); return dedent` We've detected you are running ${craFormatted} which is powered by webpack5. Your Storybook's main.js files specifies webpack4, which is incompatible. - In order to work with your version of CRA, we need to install Storybook's ${chalk.cyan( + In order to work with your version of CRA, we need to install Storybook's ${picocolors.cyan( '@storybook/builder-webpack5' )}. - More info: ${chalk.yellow( + More info: ${picocolors.yellow( 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#cra5-upgrade' )} `; diff --git a/code/lib/cli-storybook/src/automigrate/fixes/eslint-plugin.ts b/code/lib/cli-storybook/src/automigrate/fixes/eslint-plugin.ts index 719ee2e046dd..a0d21efbc70b 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/eslint-plugin.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/eslint-plugin.ts @@ -5,7 +5,7 @@ import { findEslintFile, } from 'storybook/internal/cli'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; import type { Fix } from '../types'; @@ -58,7 +58,9 @@ export const eslintPlugin: Fix = { In order to have the best experience with Storybook and follow best practices, we advise you to install eslint-plugin-storybook. - More info: ${chalk.yellow('https://github.com/storybookjs/eslint-plugin-storybook#readme')} + More info: ${picocolors.yellow( + 'https://github.com/storybookjs/eslint-plugin-storybook#readme' + )} `; }, diff --git a/code/lib/cli-storybook/src/automigrate/fixes/initial-globals.ts b/code/lib/cli-storybook/src/automigrate/fixes/initial-globals.ts index fe40749ffa16..f452be36067a 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/initial-globals.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/initial-globals.ts @@ -4,7 +4,7 @@ import type { ConfigFile } from 'storybook/internal/csf-tools'; import { formatConfig, loadConfig } from 'storybook/internal/csf-tools'; import type { Expression } from '@babel/types'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; import type { Fix } from '../types'; @@ -39,12 +39,14 @@ export const initialGlobals: Fix = { prompt({ previewConfigPath }) { return dedent` - The ${chalk.cyan('globals')} setting in ${chalk.cyan(previewConfigPath)} is deprecated - and has been renamed to ${chalk.cyan('initialGlobals')}. + The ${picocolors.cyan('globals')} setting in ${picocolors.cyan( + previewConfigPath + )} is deprecated + and has been renamed to ${picocolors.cyan('initialGlobals')}. - Learn more: ${chalk.yellow(MIGRATION)} + Learn more: ${picocolors.yellow(MIGRATION)} - Rename ${chalk.cyan('globals')} to ${chalk.cyan('initalGlobals')}? + Rename ${picocolors.cyan('globals')} to ${picocolors.cyan('initalGlobals')}? `; }, diff --git a/code/lib/cli-storybook/src/automigrate/fixes/mdx-1-to-3.ts b/code/lib/cli-storybook/src/automigrate/fixes/mdx-1-to-3.ts index bf87b5fed74f..e53ee7cde234 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/mdx-1-to-3.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/mdx-1-to-3.ts @@ -1,7 +1,7 @@ import { readFile, writeFile } from 'node:fs/promises'; import { basename } from 'node:path'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; import type { Fix } from '../types'; @@ -59,7 +59,7 @@ export const mdx1to3: Fix = { prompt({ storiesMdxFiles }) { return dedent` - We've found ${chalk.yellow(storiesMdxFiles.length)} '.stories.mdx' files in your project. + We've found ${picocolors.yellow(storiesMdxFiles.length)} '.stories.mdx' files in your project. Storybook has upgraded to MDX3 (https://mdxjs.com/blog/v3/). MDX3 itself doesn't contain disruptive breaking changes, whereas the transition from MDX1 to MDX2 was a significant change. We can try to automatically upgrade your MDX files to MDX3 format using some common patterns. @@ -67,7 +67,7 @@ export const mdx1to3: Fix = { After this install completes, and before you start Storybook, we strongly recommend reading the MDX2 section of the 7.0 migration guide. It contains useful tools for detecting and fixing any remaining issues. - ${chalk.cyan('https://storybook.js.org/migration-guides/7.0')} + ${picocolors.cyan('https://storybook.js.org/migration-guides/7.0')} `; }, diff --git a/code/lib/cli-storybook/src/automigrate/fixes/mdx-to-csf.ts b/code/lib/cli-storybook/src/automigrate/fixes/mdx-to-csf.ts index 373ec72f8c35..55e36258c9cd 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/mdx-to-csf.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/mdx-to-csf.ts @@ -2,8 +2,8 @@ import type { StoriesEntry } from 'storybook/internal/types'; import { runCodemod } from '@storybook/codemod'; -import chalk from 'chalk'; import { glob } from 'glob'; +import picocolors from 'picocolors'; import { prompt } from 'prompts'; import { dedent } from 'ts-dedent'; @@ -43,9 +43,9 @@ export const mdxToCSF: Fix = { if (!existingStoriesEntries) { throw new Error(dedent` - ❌ Unable to determine Storybook stories globs in ${chalk.blue( - mainConfig - )}, skipping ${chalk.cyan(this.id)} fix. + ❌ Unable to determine Storybook stories globs in ${picocolors.blue( + JSON.stringify(mainConfig, null, 2) + )}, skipping ${picocolors.cyan(this.id)} fix. In Storybook 7, we have deprecated defining stories in MDX files, and consequently have changed the suffix to simply .mdx. @@ -53,7 +53,7 @@ export const mdxToCSF: Fix = { We were unable to automatically migrate your 'stories' config to include any .mdx file instead of just .stories.mdx. We suggest you make this change manually. - To learn more about this change, see: ${chalk.yellow( + To learn more about this change, see: ${picocolors.yellow( 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mdx-docs-files' )} `); @@ -97,7 +97,7 @@ export const mdxToCSF: Fix = { .join('\n'); return dedent` We've detected your project has one or more globs in your 'stories' config that matches .stories.mdx files: - ${chalk.cyan(prettyExistingStoriesEntries)} + ${picocolors.cyan(prettyExistingStoriesEntries)} In Storybook 7, we have deprecated defining stories in MDX files, and consequently have changed the suffix to simply .mdx. Since Storybook 8, we have removed the support of story definition in MDX files entirely. Therefore '.stories.mdx' files aren't supported anymore. @@ -105,11 +105,11 @@ export const mdxToCSF: Fix = { We can automatically migrate your 'stories' config to include any .mdx file instead of just .stories.mdx. That would result in the following 'stories' config: - ${chalk.cyan(prettyNextStoriesEntries)} + ${picocolors.cyan(prettyNextStoriesEntries)} Additionally, we will run the 'mdx-to-csf' codemod for you, which tries to transform '*.stories.mdx' files to '*.stories.js' and '*.mdx' files. - To learn more about this change, see: ${chalk.yellow( + To learn more about this change, see: ${picocolors.yellow( 'https://storybook.js.org/docs/migration-guide#storiesmdx-to-mdxcsf' )} `; diff --git a/code/lib/cli-storybook/src/automigrate/fixes/missing-storybook-dependencies.ts b/code/lib/cli-storybook/src/automigrate/fixes/missing-storybook-dependencies.ts index ad912867f6f2..9b5892b51a32 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/missing-storybook-dependencies.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/missing-storybook-dependencies.ts @@ -4,7 +4,7 @@ import { getStorybookVersionSpecifier } from 'storybook/internal/cli'; import type { InstallationMetadata, JsPackageManager } from '@storybook/core/common'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; import type { Fix } from '../types'; @@ -112,7 +112,7 @@ export const missingStorybookDependencies: Fix - `- ${chalk.cyan(pkg)}: (${files.length} ${files.length === 1 ? 'file' : 'files'})` + `- ${picocolors.cyan(pkg)}: (${files.length} ${files.length === 1 ? 'file' : 'files'})` ) .sort() .join('\n')} diff --git a/code/lib/cli-storybook/src/automigrate/fixes/new-frameworks.ts b/code/lib/cli-storybook/src/automigrate/fixes/new-frameworks.ts index 4c891e172099..2de095f742c6 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/new-frameworks.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/new-frameworks.ts @@ -2,7 +2,7 @@ import { getStorybookVersionSpecifier } from 'storybook/internal/cli'; import { frameworkPackages, rendererPackages } from 'storybook/internal/common'; import type { Preset } from 'storybook/internal/types'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import semver from 'semver'; import invariant from 'tiny-invariant'; import { dedent } from 'ts-dedent'; @@ -211,13 +211,13 @@ export const newFrameworks: Fix = { if (viteVersion && semver.lt(viteVersion, '3.0.0')) { throw new Error(dedent` - ❌ Your project should be upgraded to use the framework package ${chalk.bold( + ❌ Your project should be upgraded to use the framework package ${picocolors.bold( newFrameworkPackage - )}, but we detected that you are using Vite ${chalk.bold( + )}, but we detected that you are using Vite ${picocolors.bold( viteVersion - )}, which is unsupported since ${chalk.bold( + )}, which is unsupported since ${picocolors.bold( 'Storybook 7.0' - )}. Please upgrade Vite to ${chalk.bold('3.0.0 or higher')} and rerun this migration. + )}. Please upgrade Vite to ${picocolors.bold('3.0.0 or higher')} and rerun this migration. `); } @@ -263,41 +263,47 @@ export const newFrameworks: Fix = { if (dependenciesToRemove.length > 0) { migrationSteps += `- Remove the following dependencies: - ${dependenciesToRemove.map((dep) => `- * ${chalk.cyan(dep)}`).join('\n')}\n`; + ${dependenciesToRemove.map((dep) => `- * ${picocolors.cyan(dep)}`).join('\n')}\n`; } if (dependenciesToAdd.length > 0) { migrationSteps += `- Add the following dependencies: - ${dependenciesToAdd.map((dep) => `- * ${chalk.cyan(dep)}`).join('\n')}\n`; + ${dependenciesToAdd.map((dep) => `- * ${picocolors.cyan(dep)}`).join('\n')}\n`; } if (!hasFrameworkInMainConfig) { - migrationSteps += `- Update or specify the ${chalk.yellow('framework')} field in ${chalk.blue( - mainConfigPath - )} with the value of "${chalk.cyan(frameworkPackage)}".\n`; + migrationSteps += `- Update or specify the ${picocolors.yellow( + 'framework' + )} field in ${picocolors.blue(mainConfigPath)} with the value of "${picocolors.cyan( + frameworkPackage + )}".\n`; } if (Object.keys(rendererOptions).length > 0) { - migrationSteps += `- Move the ${chalk.yellow(`${renderer}Options`)} field in ${chalk.blue( - mainConfigPath - )} to ${chalk.yellow('framework.options')}, and remove that field entirely. - More info: ${chalk.yellow( + migrationSteps += `- Move the ${picocolors.yellow( + `${renderer}Options` + )} field in ${picocolors.blue(mainConfigPath)} to ${picocolors.yellow( + 'framework.options' + )}, and remove that field entirely. + More info: ${picocolors.yellow( 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#frameworkoptions-renamed' )}\n`; } if (addonsToRemove.length > 0) { - migrationSteps += `- Remove the following addons from your ${chalk.blue( + migrationSteps += `- Remove the following addons from your ${picocolors.blue( mainConfigPath )}, as the new framework also supports features provided by them: - ${addonsToRemove.map((dep) => `- * ${chalk.cyan(dep)}`).join('\n')} + ${addonsToRemove.map((dep) => `- * ${picocolors.cyan(dep)}`).join('\n')} `; } if (Object.keys(addonOptions).length > 0) { - migrationSteps += `- Move the addon options "${chalk.yellow( + migrationSteps += `- Move the addon options "${picocolors.yellow( Object.keys(addonOptions).join(', ') - )}" in ${chalk.blue(mainConfigPath)} to the ${chalk.yellow('framework.options')} field.\n`; + )}" in ${picocolors.blue(mainConfigPath)} to the ${picocolors.yellow( + 'framework.options' + )} field.\n`; } if (builderConfig) { @@ -305,14 +311,16 @@ export const newFrameworks: Fix = { typeof builderConfig === 'object' && Object.keys(builderConfig.options || {}).length > 0 ) { - migrationSteps += `- Move the ${chalk.yellow('core.builder.options')} field in ${chalk.blue( - mainConfigPath - )} to ${chalk.yellow('framework.options.builder')}\n`; + migrationSteps += `- Move the ${picocolors.yellow( + 'core.builder.options' + )} field in ${picocolors.blue(mainConfigPath)} to ${picocolors.yellow( + 'framework.options.builder' + )}\n`; } - migrationSteps += `- Remove the ${chalk.yellow('core.builder')} field in ${chalk.blue( - mainConfigPath - )}.\n`; + migrationSteps += `- Remove the ${picocolors.yellow( + 'core.builder' + )} field in ${picocolors.blue(mainConfigPath)}.\n`; } if ( @@ -320,47 +328,49 @@ export const newFrameworks: Fix = { dependenciesToRemove.includes('@storybook/manager-webpack4') ) { disclaimer = dedent`\n\n - ${chalk.underline(chalk.bold(chalk.cyan('Webpack 4 users')))} + ${picocolors.underline(picocolors.bold(picocolors.cyan('Webpack 4 users')))} Unless you're using Storybook's Vite builder, this automigration will install a Webpack 5 based framework. Given you were using Storybook's Webpack 4 builder (default in 6.x, discontinued in 7.0), this could be a breaking change -- especially if your project has a custom webpack configuration. - To learn more about migrating from Webpack4, see: ${chalk.yellow( + To learn more about migrating from Webpack4, see: ${picocolors.yellow( 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack4-support-discontinued' )}`; } if (metaFramework === 'nextjs') { if (dependenciesToRemove.includes('storybook-addon-next-router')) { - migrationSteps += `- Migrate the usage of the ${chalk.cyan( + migrationSteps += `- Migrate the usage of the ${picocolors.cyan( 'storybook-addon-next-router' - )} addon to use the APIs from the ${chalk.magenta( + )} addon to use the APIs from the ${picocolors.magenta( '@storybook/nextjs' )} framework package instead. Follow the instructions below.`; } if (frameworkPackage === '@storybook/react-vite') { disclaimer = dedent`\n\n - ${chalk.bold('Important')}: We've detected you are using Storybook in a Next.js project. + ${picocolors.bold( + 'Important' + )}: We've detected you are using Storybook in a Next.js project. - This migration is set to update your project to use the ${chalk.magenta( + This migration is set to update your project to use the ${picocolors.magenta( '@storybook/react-vite' - )} framework, but Storybook provides a framework package specifically for Next.js projects: ${chalk.magenta( + )} framework, but Storybook provides a framework package specifically for Next.js projects: ${picocolors.magenta( '@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. - If you are interested in using this package, see: ${chalk.yellow( + If you are interested in using this package, see: ${picocolors.yellow( 'https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md' )} `; } else if (frameworkPackage === '@storybook/nextjs') { disclaimer = dedent`\n\n - The ${chalk.magenta( + The ${picocolors.magenta( '@storybook/nextjs' - )} package provides great user experience for Next.js users, and we highly recommend you to read more about it at ${chalk.yellow( + )} package provides great user experience for Next.js users, and we highly recommend you to read more about it at ${picocolors.yellow( 'https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md' )} `; @@ -370,31 +380,33 @@ export const newFrameworks: Fix = { if (metaFramework === 'sveltekit') { if (frameworkPackage === '@storybook/svelte-webpack5') { disclaimer = dedent`\n\n - ${chalk.bold('Important')}: We've detected you are using Storybook in a SvelteKit project. + ${picocolors.bold( + 'Important' + )}: We've detected you are using Storybook in a SvelteKit project. - This migration is set to update your project to use the ${chalk.magenta( + This migration is set to update your project to use the ${picocolors.magenta( '@storybook/svelte-webpack5' - )} framework, but Storybook provides a framework package specifically for SvelteKit projects: ${chalk.magenta( + )} framework, but Storybook provides a framework package specifically for SvelteKit projects: ${picocolors.magenta( '@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. - If you are interested in using this package, see: ${chalk.yellow( + If you are interested in using this package, see: ${picocolors.yellow( 'https://github.com/storybookjs/storybook/blob/next/code/frameworks/sveltekit/README.md' )} `; } else { - migrationSteps += `- Remove the ${chalk.yellow( + migrationSteps += `- Remove the ${picocolors.yellow( `${renderer}Options` - )} field from ${chalk.blue(mainConfigPath)}. - More info: ${chalk.yellow( + )} field from ${picocolors.blue(mainConfigPath)}. + More info: ${picocolors.yellow( 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#vite-builder-uses-vite-config-automatically' )}\n`; disclaimer = dedent`\n\n - The ${chalk.magenta( + The ${picocolors.magenta( '@storybook/sveltekit' - )} package provides great user experience for SvelteKit users, and we highly recommend you to read more about it at ${chalk.yellow( + )} package provides great user experience for SvelteKit users, and we highly recommend you to read more about it at ${picocolors.yellow( 'https://github.com/storybookjs/storybook/blob/next/code/frameworks/sveltekit/README.md' )} `; @@ -406,14 +418,14 @@ export const newFrameworks: Fix = { Storybook 7 introduced the concept of frameworks, which abstracts configuration for renderers (e.g. React, Vue), builders (e.g. Webpack, Vite) and defaults to make integrations easier. - Your project should be updated to use Storybook's framework: ${chalk.magenta( + Your project should be updated to use Storybook's framework: ${picocolors.magenta( frameworkPackage )}. We can attempt to do this for you automatically. Here are the steps this migration will do to migrate your project: ${migrationSteps} - To learn more about the new framework format, see: ${chalk.yellow( + To learn more about the new framework format, see: ${picocolors.yellow( 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-framework-api' )}${disclaimer} `; diff --git a/code/lib/cli-storybook/src/automigrate/fixes/react-docgen.ts b/code/lib/cli-storybook/src/automigrate/fixes/react-docgen.ts index bec42b612a46..86b67df2509f 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/react-docgen.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/react-docgen.ts @@ -1,4 +1,4 @@ -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; import { getRendererName, updateMainConfig } from '../helpers/mainConfigFile'; @@ -47,25 +47,25 @@ export const reactDocgen: Fix = { `; } else { return dedent` - Since Storybook 8.0, ${chalk.cyan( + Since Storybook 8.0, ${picocolors.cyan( 'react-docgen' - )} is now the default for generating component controls, replacing ${chalk.cyan( + )} is now the default for generating component controls, replacing ${picocolors.cyan( 'react-docgen-typescript' )}. This offers better performance and suits most cases. However, for complex TypeScript types or specific type features, the generated controls might not be as precise. For more on this change, check the migration guide: - ${chalk.yellow( + ${picocolors.yellow( 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-docgen-component-analysis-by-default' )} For known "react-docgen" limitations, see: - ${chalk.yellow('https://github.com/storybookjs/storybook/issues/26606')} + ${picocolors.yellow('https://github.com/storybookjs/storybook/issues/26606')} - Press Y to revert to ${chalk.cyan('react-docgen-typescript')}, press N to use ${chalk.cyan( - 'react-docgen' - )} + Press Y to revert to ${picocolors.cyan( + 'react-docgen-typescript' + )}, press N to use ${picocolors.cyan('react-docgen')} `; } }, diff --git a/code/lib/cli-storybook/src/automigrate/fixes/remove-argtypes-regex.ts b/code/lib/cli-storybook/src/automigrate/fixes/remove-argtypes-regex.ts index ec84504127c8..3ae9de96b8db 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/remove-argtypes-regex.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/remove-argtypes-regex.ts @@ -4,7 +4,7 @@ import { babelParse } from 'storybook/internal/csf-tools'; import * as babel from '@babel/core'; import type { BabelFile, NodePath } from '@babel/core'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; import type { Fix } from '../types'; @@ -40,7 +40,7 @@ export const removeArgtypesRegex: Fix<{ argTypesRegex: NodePath; previewConfigPa }, prompt({ argTypesRegex, previewConfigPath }) { return dedent` - ${chalk.bold('Attention')}: We've detected that you're using argTypesRegex: + ${picocolors.bold('Attention')}: We've detected that you're using argTypesRegex: ${argTypesRegex.buildCodeFrameError(`${previewConfigPath}`).message} @@ -53,12 +53,12 @@ export const removeArgtypesRegex: Fix<{ argTypesRegex: NodePath; previewConfigPa (fn) function to mock your component's methods instead. Use the following command to check for implied mocked actions in your play functions: - ${chalk.cyan( + ${picocolors.cyan( 'npx storybook migrate find-implicit-spies --glob="**/*.stories.@(js|jsx|ts|tsx)"' )} Then, refer to our docs to migrate your play functions to Storybook 8: - ${chalk.yellow( + ${picocolors.yellow( 'https://storybook.js.org/docs/8.0/essentials/actions#via-storybooktest-fn-spy-function' )} `; diff --git a/code/lib/cli-storybook/src/automigrate/fixes/remove-global-client-apis.ts b/code/lib/cli-storybook/src/automigrate/fixes/remove-global-client-apis.ts index e7caf9027d4b..36213c09e953 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/remove-global-client-apis.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/remove-global-client-apis.ts @@ -1,6 +1,6 @@ import { readFile } from 'node:fs/promises'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; import type { Fix } from '../types'; @@ -48,16 +48,18 @@ export const removedGlobalClientAPIs: Fix = { }, prompt({ usedAPIs, previewPath }) { return dedent` - ${chalk.bold( - chalk.red('Attention') + ${picocolors.bold( + picocolors.red('Attention') )}: We could not automatically make this change. You'll need to do it manually. - The following APIs (used in "${chalk.yellow(previewPath)}") have been removed from Storybook: + The following APIs (used in "${picocolors.yellow( + previewPath + )}") have been removed from Storybook: - ${usedAPIs.map((api) => `- ${chalk.cyan(api)}`).join('\n')} + ${usedAPIs.map((api) => `- ${picocolors.cyan(api)}`).join('\n')} Please see the migration guide for more information: - ${chalk.yellow( + ${picocolors.yellow( 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#removed-global-client-apis' )} `; diff --git a/code/lib/cli-storybook/src/automigrate/fixes/remove-jest-testing-library.ts b/code/lib/cli-storybook/src/automigrate/fixes/remove-jest-testing-library.ts index 928ace2519bf..b7de9df0afc6 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/remove-jest-testing-library.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/remove-jest-testing-library.ts @@ -2,7 +2,7 @@ import { getStorybookVersionSpecifier } from 'storybook/internal/cli'; import { runCodemod } from '@storybook/codemod'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import prompts from 'prompts'; import { dedent } from 'ts-dedent'; @@ -24,13 +24,13 @@ export const removeJestTestingLibrary: Fix<{ incompatiblePackages: string[] }> = }, prompt({ incompatiblePackages }) { return dedent` - ${chalk.bold( + ${picocolors.bold( 'Attention' )}: We've detected that you're using the following packages which are known to be incompatible since Storybook 8: - ${incompatiblePackages.map((name) => `- ${chalk.cyan(`${name}`)}`).join('\n')} + ${incompatiblePackages.map((name) => `- ${picocolors.cyan(`${name}`)}`).join('\n')} - We will uninstall them for you and install ${chalk.cyan('@storybook/test')} instead. + We will uninstall them for you and install ${picocolors.cyan('@storybook/test')} instead. Also, we can help you migrate your stories to use the new package. `; diff --git a/code/lib/cli-storybook/src/automigrate/fixes/sb-binary.ts b/code/lib/cli-storybook/src/automigrate/fixes/sb-binary.ts index 36dcdc32cc11..e680f93da772 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/sb-binary.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/sb-binary.ts @@ -1,7 +1,7 @@ import { getStorybookVersionSpecifier } from 'storybook/internal/cli'; import type { PackageJsonWithDepsAndDevDeps } from 'storybook/internal/common'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; import type { Fix } from '../types'; @@ -50,10 +50,10 @@ export const sbBinary: Fix = { }, prompt({ storybookVersion, hasSbBinary, hasStorybookBinary }) { - const sbFormatted = chalk.cyan(`Storybook ${storybookVersion}`); + const sbFormatted = picocolors.cyan(`Storybook ${storybookVersion}`); const storybookBinaryMessage = !hasStorybookBinary - ? `We've detected you are using ${sbFormatted} without Storybook's ${chalk.magenta( + ? `We've detected you are using ${sbFormatted} without Storybook's ${picocolors.magenta( 'storybook' )} binary. Starting in Storybook 7.0, it has to be installed.` : ''; @@ -66,7 +66,7 @@ export const sbBinary: Fix = { ${storybookBinaryMessage} ${extraMessage} - More info: ${chalk.yellow( + More info: ${picocolors.yellow( 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#start-storybook--build-storybook-binaries-removed' )} `; diff --git a/code/lib/cli-storybook/src/automigrate/fixes/sb-scripts.ts b/code/lib/cli-storybook/src/automigrate/fixes/sb-scripts.ts index af80c94c394e..d3c34e8ef8b8 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/sb-scripts.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/sb-scripts.ts @@ -1,7 +1,7 @@ import type { PackageJsonWithDepsAndDevDeps } from 'storybook/internal/common'; import type { PackageJson } from 'storybook/internal/types'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import semver from 'semver'; import { dedent } from 'ts-dedent'; @@ -101,16 +101,16 @@ export const sbScripts: Fix = { }, prompt({ storybookVersion, storybookScripts }) { - const sbFormatted = chalk.cyan(`Storybook ${storybookVersion}`); + const sbFormatted = picocolors.cyan(`Storybook ${storybookVersion}`); const newScriptsMessage = Object.keys(storybookScripts).reduce((acc: string[], scriptKey) => { acc.push( [ - chalk.bold(scriptKey), + picocolors.bold(scriptKey), 'from:', - chalk.cyan(storybookScripts[scriptKey].before), + picocolors.cyan(storybookScripts[scriptKey].before), 'to:', - chalk.cyan(storybookScripts[scriptKey].after), + picocolors.cyan(storybookScripts[scriptKey].after), ].join('\n') ); return acc; @@ -118,16 +118,16 @@ export const sbScripts: Fix = { return dedent` We've detected you are using ${sbFormatted} with scripts from previous versions of Storybook. - Starting in Storybook 7, the ${chalk.yellow('start-storybook')} and ${chalk.yellow( + Starting in Storybook 7, the ${picocolors.yellow('start-storybook')} and ${picocolors.yellow( 'build-storybook' - )} binaries have changed to ${chalk.magenta('storybook dev')} and ${chalk.magenta( + )} binaries have changed to ${picocolors.magenta('storybook dev')} and ${picocolors.magenta( 'storybook build' )} respectively. In order to work with ${sbFormatted}, your storybook scripts have to be adjusted to use the binary. We can adjust them for you: ${newScriptsMessage.join('\n\n')} - In case this migration did not cover all of your scripts, or you'd like more info: ${chalk.yellow( + In case this migration did not cover all of your scripts, or you'd like more info: ${picocolors.yellow( 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#start-storybook--build-storybook-binaries-removed' )} `; diff --git a/code/lib/cli-storybook/src/automigrate/fixes/storyshots-migration.ts b/code/lib/cli-storybook/src/automigrate/fixes/storyshots-migration.ts index 7024a4763c6f..b6836584edd3 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/storyshots-migration.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/storyshots-migration.ts @@ -1,4 +1,4 @@ -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; import type { Fix } from '../types'; @@ -21,12 +21,12 @@ export const storyshotsMigration: Fix = { }, prompt() { return dedent` - ${chalk.bold( + ${picocolors.bold( 'Attention' )}: Storyshots is now officially deprecated, is no longer being maintained, and was removed in Storybook 8. We recommend following the migration guide we've prepared to help you during this transition period: - ${chalk.yellow('https://storybook.js.org/docs/writing-tests/storyshots-migration-guide')} + ${picocolors.yellow('https://storybook.js.org/docs/writing-tests/storyshots-migration-guide')} `; }, }; diff --git a/code/lib/cli-storybook/src/automigrate/fixes/upgrade-storybook-related-dependencies.ts b/code/lib/cli-storybook/src/automigrate/fixes/upgrade-storybook-related-dependencies.ts index 0df85cb43635..40200ab9ac41 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/upgrade-storybook-related-dependencies.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/upgrade-storybook-related-dependencies.ts @@ -1,7 +1,7 @@ import type { JsPackageManager } from 'storybook/internal/common'; import { isCorePackage } from 'storybook/internal/common'; -import { cyan, yellow } from 'chalk'; +import { cyan, yellow } from 'picocolors'; import { gt } from 'semver'; import { dedent } from 'ts-dedent'; diff --git a/code/lib/cli-storybook/src/automigrate/fixes/vta.ts b/code/lib/cli-storybook/src/automigrate/fixes/vta.ts index f2c174bd9d01..5232412e2fa1 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/vta.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/vta.ts @@ -1,4 +1,4 @@ -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; import { getAddonNames, updateMainConfig } from '../helpers/mainConfigFile'; @@ -31,7 +31,7 @@ export const vta: Fix = { return dedent` New to Storybook 8: Storybook's Visual Tests addon helps you catch unintentional changes/bugs in your stories. The addon is powered by Chromatic, a cloud-based testing tool developed by Storybook's core team. - Learn more: ${chalk.yellow('https://storybook.js.org/docs/writing-tests/visual-testing')} + Learn more: ${picocolors.yellow('https://storybook.js.org/docs/writing-tests/visual-testing')} Install Visual Tests addon in your project? `; diff --git a/code/lib/cli-storybook/src/automigrate/fixes/vue3.ts b/code/lib/cli-storybook/src/automigrate/fixes/vue3.ts index aa04378d0622..1ce497a8cee7 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/vue3.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/vue3.ts @@ -1,4 +1,4 @@ -import chalk from 'chalk'; +import picocolors from 'picocolors'; import semver from 'semver'; import { dedent } from 'ts-dedent'; @@ -35,17 +35,17 @@ export const vue3: Fix = { }, prompt({ vueVersion, storybookVersion }) { - const vueFormatted = chalk.cyan(`Vue ${vueVersion}`); - const sbFormatted = chalk.cyan(`Storybook ${storybookVersion}`); + const vueFormatted = picocolors.cyan(`Vue ${vueVersion}`); + const sbFormatted = picocolors.cyan(`Storybook ${storybookVersion}`); return dedent` We've detected you are running ${vueFormatted} with Storybook. ${sbFormatted} runs webpack4 by default, which is incompatible. - In order to work with your version of Vue, we need to install Storybook's ${chalk.cyan( + In order to work with your version of Vue, we need to install Storybook's ${picocolors.cyan( 'webpack5 builder' )}. - More info: ${chalk.yellow( + More info: ${picocolors.yellow( 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#vue3-upgrade' )} `; diff --git a/code/lib/cli-storybook/src/automigrate/fixes/webpack5-compiler-setup.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/webpack5-compiler-setup.test.ts index 5cf952a3a5c4..ccba633cc488 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/webpack5-compiler-setup.test.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/webpack5-compiler-setup.test.ts @@ -36,8 +36,8 @@ vi.mock('prompts', () => { }; }); -// mock chalk yellow and cyan -vi.mock('chalk', () => { +// mock picocolors yellow and cyan +vi.mock('picocolors', () => { return { default: { yellow: (str: string) => str, diff --git a/code/lib/cli-storybook/src/automigrate/fixes/webpack5-compiler-setup.ts b/code/lib/cli-storybook/src/automigrate/fixes/webpack5-compiler-setup.ts index 2462e02ff159..32ff8d93a36f 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/webpack5-compiler-setup.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/webpack5-compiler-setup.ts @@ -8,7 +8,7 @@ import { import { frameworkPackages } from 'storybook/internal/common'; import type { SupportedFrameworks } from 'storybook/internal/types'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import prompts from 'prompts'; import { dedent } from 'ts-dedent'; @@ -115,23 +115,23 @@ export const webpack5CompilerSetup = { if (shouldRemoveSWCFlag) { message.push(dedent` We need to update your Storybook configuration for Webpack 5. - The ${chalk.yellow('framework.options.builder.useSWC')} flag will be removed.`); + The ${picocolors.yellow('framework.options.builder.useSWC')} flag will be removed.`); } if (isNextJs) { message.push(dedent` Storybook now detects whether it should use Babel or SWC as a compiler by applying the same logic as Next.js itself:\n - - If you have a ${chalk.yellow('.babelrc')} (or ${chalk.yellow( + - If you have a ${picocolors.yellow('.babelrc')} (or ${picocolors.yellow( 'babel.config.js' )}) file in your project, Storybook will use Babel as the compiler. - - If you have a ${chalk.yellow('.babelrc')} (or ${chalk.yellow( + - If you have a ${picocolors.yellow('.babelrc')} (or ${picocolors.yellow( 'babel.config.js' )}) file in your project and you have set - ${chalk.yellow('experimental.forceSwcTransforms = true')} in your ${chalk.yellow( - 'next.config.js' - )} file, + ${picocolors.yellow( + 'experimental.forceSwcTransforms = true' + )} in your ${picocolors.yellow('next.config.js')} file, Storybook will use SWC as the compiler. - - If you don't have a ${chalk.yellow('.babelrc')} (or ${chalk.yellow( + - If you don't have a ${picocolors.yellow('.babelrc')} (or ${picocolors.yellow( 'babel.config.js' )}) file in your project, Storybook will use SWC as the compiler. `); @@ -142,7 +142,7 @@ export const webpack5CompilerSetup = { - SWC: Fast and easy to configure. Ideal if you want faster builds and have a straightforward configuration without the need for Babel's extensibility.\n In the next step, Storybook will ask you to choose a compiler to automatically set it up for you.\n After the migration, you can switch Webpack5 compilers by swapping the addon in your project. - You can find more information here: ${chalk.yellow( + You can find more information here: ${picocolors.yellow( 'https://storybook.js.org/docs/8.0/builders/webpack#compiler-support' )} `); @@ -152,7 +152,7 @@ export const webpack5CompilerSetup = { We have detected, that you want to use SWC as the compiler for Webpack5.\n In the next step, Storybook will install @storybook/addon-webpack5-compiler-swc and will add it to your addons list in your Storybook config.\n After the migration, you can switch Webpack5 compilers by swapping the addon in your project. - You can find more information here: ${chalk.yellow( + You can find more information here: ${picocolors.yellow( 'https://storybook.js.org/docs/8.0/builders/webpack#compiler-support' )} `); diff --git a/code/lib/cli-storybook/src/automigrate/fixes/webpack5.ts b/code/lib/cli-storybook/src/automigrate/fixes/webpack5.ts index ff27a1479590..da33295d49f9 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/webpack5.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/webpack5.ts @@ -1,4 +1,4 @@ -import chalk from 'chalk'; +import picocolors from 'picocolors'; import semver from 'semver'; import { dedent } from 'ts-dedent'; @@ -43,17 +43,17 @@ export const webpack5 = { }, prompt({ webpackVersion }) { - const webpackFormatted = chalk.cyan(`webpack ${webpackVersion}`); + const webpackFormatted = picocolors.cyan(`webpack ${webpackVersion}`); return dedent` We've detected you're running ${webpackFormatted}. Your Storybook's main.js files specifies webpack4, which is incompatible. - To run Storybook in webpack5-mode, we can install Storybook's ${chalk.cyan( + To run Storybook in webpack5-mode, we can install Storybook's ${picocolors.cyan( '@storybook/builder-webpack5' )} for you. - More info: ${chalk.yellow( + More info: ${picocolors.yellow( 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack-5-manager-build' )} `; diff --git a/code/lib/cli-storybook/src/automigrate/fixes/wrap-require.ts b/code/lib/cli-storybook/src/automigrate/fixes/wrap-require.ts index 723a2874031a..94ba2e2ade8d 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/wrap-require.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/wrap-require.ts @@ -1,7 +1,7 @@ import { detectPnp } from 'storybook/internal/cli'; import { readConfig } from 'storybook/internal/csf-tools'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; import { updateMainConfig } from '../helpers/mainConfigFile'; @@ -50,7 +50,7 @@ export const wrapRequire: Fix = { }, prompt({ storybookVersion, isStorybookInMonorepo }) { - const sbFormatted = chalk.cyan(`Storybook ${storybookVersion}`); + const sbFormatted = picocolors.cyan(`Storybook ${storybookVersion}`); return dedent`We have detected that you're using ${sbFormatted} in a ${ isStorybookInMonorepo ? 'monorepo' : 'PnP' diff --git a/code/lib/cli-storybook/src/automigrate/helpers/checkWebpack5Builder.ts b/code/lib/cli-storybook/src/automigrate/helpers/checkWebpack5Builder.ts index cc6a977454dc..6e27a27f513c 100644 --- a/code/lib/cli-storybook/src/automigrate/helpers/checkWebpack5Builder.ts +++ b/code/lib/cli-storybook/src/automigrate/helpers/checkWebpack5Builder.ts @@ -1,6 +1,6 @@ import type { StorybookConfigRaw } from 'storybook/internal/types'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import semver from 'semver'; import { dedent } from 'ts-dedent'; @@ -22,11 +22,11 @@ export const checkWebpack5Builder = async ({ To upgrade to the latest stable release, run this from your project directory: - ${chalk.cyan('npx storybook@latest upgrade')} + ${picocolors.cyan('npx storybook@latest upgrade')} To upgrade to the latest pre-release, run this from your project directory: - ${chalk.cyan('npx storybook@next upgrade')} + ${picocolors.cyan('npx storybook@next upgrade')} `.trim() ); return null; diff --git a/code/lib/cli-storybook/src/automigrate/helpers/cleanLog.ts b/code/lib/cli-storybook/src/automigrate/helpers/cleanLog.ts index 7cb8c864197a..2f8a7b7ed856 100644 --- a/code/lib/cli-storybook/src/automigrate/helpers/cleanLog.ts +++ b/code/lib/cli-storybook/src/automigrate/helpers/cleanLog.ts @@ -13,7 +13,7 @@ export const ansiRegex = ({ onlyFirst = false } = {}) => { export const cleanLog = (str: string) => str - // remove chalk ANSI colors + // remove picocolors ANSI colors .replace(ansiRegex(), '') // fix boxen output .replace(/╮│/g, '╮\n│') diff --git a/code/lib/cli-storybook/src/automigrate/helpers/getMigrationSummary.ts b/code/lib/cli-storybook/src/automigrate/helpers/getMigrationSummary.ts index 3aaaf7542cd6..67e07c9a5b29 100644 --- a/code/lib/cli-storybook/src/automigrate/helpers/getMigrationSummary.ts +++ b/code/lib/cli-storybook/src/automigrate/helpers/getMigrationSummary.ts @@ -1,7 +1,7 @@ import { type InstallationMetadata } from 'storybook/internal/common'; import boxen from 'boxen'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; import type { FixSummary } from '../types'; @@ -17,34 +17,36 @@ function getGlossaryMessages( ) { const messages = []; if (fixSummary.succeeded.length > 0) { - messages.push(chalk.bold('Successful migrations:')); - messages.push(fixSummary.succeeded.map((m) => chalk.green(m)).join(', ')); + messages.push(picocolors.bold('Successful migrations:')); + messages.push(fixSummary.succeeded.map((m) => picocolors.green(m)).join(', ')); } if (Object.keys(fixSummary.failed).length > 0) { - messages.push(chalk.bold('Failed migrations:')); + messages.push(picocolors.bold('Failed migrations:')); messages.push( Object.entries(fixSummary.failed) .map(([id, error]) => { - return `${chalk.redBright(id)}:\n${error}`; + return `${picocolors.bold(picocolors.red(id))}:\n${error}`; }) .join('\n') ); - messages.push(`You can find the full logs in ${chalk.cyan(logFile)}`); + messages.push(`You can find the full logs in ${picocolors.cyan(logFile)}`); } if (fixSummary.manual.length > 0) { - messages.push(chalk.bold('Manual migrations:')); + messages.push(picocolors.bold('Manual migrations:')); messages.push( fixSummary.manual - .map((m) => (fixResults[m] === FixStatus.MANUAL_SUCCEEDED ? chalk.green(m) : chalk.blue(m))) + .map((m) => + fixResults[m] === FixStatus.MANUAL_SUCCEEDED ? picocolors.green(m) : picocolors.blue(m) + ) .join(', ') ); } if (fixSummary.skipped.length > 0) { - messages.push(chalk.bold('Skipped migrations:')); - messages.push(fixSummary.skipped.map((m) => chalk.cyan(m)).join(', ')); + messages.push(picocolors.bold('Skipped migrations:')); + messages.push(fixSummary.skipped.map((m) => picocolors.cyan(m)).join(', ')); } return messages; @@ -64,16 +66,16 @@ export function getMigrationSummary({ const messages = []; messages.push(getGlossaryMessages(fixSummary, fixResults, logFile).join(messageDivider)); - messages.push(dedent`If you'd like to run the migrations again, you can do so by running '${chalk.cyan( + messages.push(dedent`If you'd like to run the migrations again, you can do so by running '${picocolors.cyan( 'npx storybook automigrate' )}' The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook. - Please check the changelog and migration guide for manual migrations and more information: ${chalk.yellow( + Please check the changelog and migration guide for manual migrations and more information: ${picocolors.yellow( 'https://storybook.js.org/docs/8.0/migration-guide' )} - And reach out on Discord if you need help: ${chalk.yellow('https://discord.gg/storybook')} + And reach out on Discord if you need help: ${picocolors.yellow('https://discord.gg/storybook')} `); const hasNoFixes = Object.values(fixResults).every((r) => r === FixStatus.UNNECESSARY); diff --git a/code/lib/cli-storybook/src/automigrate/helpers/mainConfigFile.ts b/code/lib/cli-storybook/src/automigrate/helpers/mainConfigFile.ts index c306d2578a13..57aa4bf7ce07 100644 --- a/code/lib/cli-storybook/src/automigrate/helpers/mainConfigFile.ts +++ b/code/lib/cli-storybook/src/automigrate/helpers/mainConfigFile.ts @@ -15,7 +15,7 @@ import type { ConfigFile } from 'storybook/internal/csf-tools'; import { readConfig, writeConfig as writeConfigFile } from 'storybook/internal/csf-tools'; import type { StorybookConfig, StorybookConfigRaw } from 'storybook/internal/types'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; const logger = console; @@ -146,7 +146,7 @@ export const getStorybookData = async ({ mainConfig = (await loadMainConfig({ configDir, noCache: true })) as StorybookConfigRaw; } catch (err) { throw new Error( - dedent`Unable to find or evaluate ${chalk.blue(mainConfigPath)}: ${String(err)}` + dedent`Unable to find or evaluate ${picocolors.blue(mainConfigPath)}: ${String(err)}` ); } @@ -189,13 +189,13 @@ export const updateMainConfig = async ( } } catch (e) { logger.info( - `❌ The migration failed to update your ${chalk.blue( + `❌ The migration failed to update your ${picocolors.blue( mainConfigPath )} on your behalf because of the following error: ${e}\n` ); logger.info( - `⚠️ Storybook automigrations are based on AST parsing and it's possible that your ${chalk.blue( + `⚠️ Storybook automigrations are based on AST parsing and it's possible that your ${picocolors.blue( mainConfigPath )} file contains a non-standard format (e.g. your export is not an object) or that there was an error when parsing dynamic values (e.g. "require" calls, or usage of environment variables). When your main config is non-standard, automigrations are unfortunately not possible. Please follow the instructions given previously and follow the documentation to make the updates manually.` ); diff --git a/code/lib/cli-storybook/src/automigrate/index.ts b/code/lib/cli-storybook/src/automigrate/index.ts index e5b8126d5e29..9d98d97d7013 100644 --- a/code/lib/cli-storybook/src/automigrate/index.ts +++ b/code/lib/cli-storybook/src/automigrate/index.ts @@ -11,7 +11,7 @@ import { } from 'storybook/internal/common'; import boxen from 'boxen'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import prompts from 'prompts'; import semver from 'semver'; import invariant from 'tiny-invariant'; @@ -61,7 +61,7 @@ const cleanup = () => { const logAvailableMigrations = () => { const availableFixes = allFixes - .map((f) => chalk.yellow(f.id)) + .map((f) => picocolors.yellow(f.id)) .map((x) => `- ${x}`) .join('\n'); @@ -154,7 +154,7 @@ export const automigrate = async ({ const fixes: Fix[] = fixId ? selectedFixes.filter((f) => f.id === fixId) : selectedFixes; if (fixId && fixes.length === 0) { - logger.info(`📭 No migrations found for ${chalk.magenta(fixId)}.`); + logger.info(`📭 No migrations found for ${picocolors.magenta(fixId)}.`); logAvailableMigrations(); return null; } @@ -265,7 +265,7 @@ export async function runFixes({ }); } } catch (error) { - logger.info(`⚠️ failed to check fix ${chalk.bold(f.id)}`); + logger.info(`⚠️ failed to check fix ${picocolors.bold(f.id)}`); if (error instanceof Error) { logger.error(`\n${error.stack}`); fixSummary.failed[f.id] = error.message; @@ -277,7 +277,7 @@ export async function runFixes({ const promptType: Prompt = typeof f.promptType === 'function' ? await f.promptType(result) : (f.promptType ?? 'auto'); - logger.info(`\n🔎 found a '${chalk.cyan(f.id)}' migration:`); + logger.info(`\n🔎 found a '${picocolors.cyan(f.id)}' migration:`); const message = f.prompt(result); const getTitle = () => { @@ -342,7 +342,9 @@ export async function runFixes({ { type: 'confirm', name: 'fix', - message: `Do you want to run the '${chalk.cyan(f.id)}' migration on your project?`, + message: `Do you want to run the '${picocolors.cyan( + f.id + )}' migration on your project?`, initial: f.promptDefaultValue ?? true, }, { @@ -383,7 +385,7 @@ export async function runFixes({ mainConfigPath, skipInstall, }); - logger.info(`✅ ran ${chalk.cyan(f.id)} migration`); + logger.info(`✅ ran ${picocolors.cyan(f.id)} migration`); fixResults[f.id] = FixStatus.SUCCEEDED; fixSummary.succeeded.push(f.id); @@ -392,7 +394,7 @@ export async function runFixes({ fixSummary.failed[f.id] = error instanceof Error ? error.message : 'Failed to run migration'; - logger.info(`❌ error when running ${chalk.cyan(f.id)} migration`); + logger.info(`❌ error when running ${picocolors.cyan(f.id)} migration`); logger.info(error); logger.info(); } diff --git a/code/lib/cli-storybook/src/bin/index.ts b/code/lib/cli-storybook/src/bin/index.ts index 34f70b540a0b..33105a269d68 100644 --- a/code/lib/cli-storybook/src/bin/index.ts +++ b/code/lib/cli-storybook/src/bin/index.ts @@ -7,11 +7,11 @@ import { withTelemetry } from 'storybook/internal/core-server'; import { logger } from 'storybook/internal/node-logger'; import { addToGlobalContext, telemetry } from 'storybook/internal/telemetry'; -import chalk from 'chalk'; import { program } from 'commander'; import envinfo from 'envinfo'; import { findPackageSync } from 'fd-package-json'; import leven from 'leven'; +import picocolors from 'picocolors'; import invariant from 'tiny-invariant'; import { add } from '../add'; @@ -81,7 +81,7 @@ command('upgrade') command('info') .description('Prints debugging information about the local environment') .action(async () => { - consoleLogger.log(chalk.bold('\nStorybook Environment Info:')); + consoleLogger.log(picocolors.bold('\nStorybook Environment Info:')); const pkgManager = await JsPackageManagerFactory.getPackageManager(); const activePackageManager = pkgManager.type.replace(/\d/, ''); // 'yarn1' -> 'yarn' const output = await envinfo.run({ @@ -95,7 +95,7 @@ command('info') consoleLogger.log( output.replace( activePackageManagerLine, - chalk.bold(`${activePackageManagerLine} <----- active`) + picocolors.bold(`${activePackageManagerLine} <----- active`) ) ); }); diff --git a/code/lib/cli-storybook/src/doctor/getDuplicatedDepsWarnings.ts b/code/lib/cli-storybook/src/doctor/getDuplicatedDepsWarnings.ts index 871bb13e4805..617713f5adfc 100644 --- a/code/lib/cli-storybook/src/doctor/getDuplicatedDepsWarnings.ts +++ b/code/lib/cli-storybook/src/doctor/getDuplicatedDepsWarnings.ts @@ -1,7 +1,7 @@ import { frameworkPackages, rendererPackages } from 'storybook/internal/common'; import type { InstallationMetadata } from 'storybook/internal/common'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { hasMultipleVersions } from './hasMultipleVersions'; @@ -67,9 +67,11 @@ export function getDuplicatedDepsWarnings( const hasMultipleMajorVersions = hasMultipleVersions(packageVersions); if (disallowList.includes(dep) && hasMultipleMajorVersions) { - acc.critical.push(`${chalk.redBright(dep)}:\n${packageVersions.join(', ')}`); + acc.critical.push( + `${picocolors.bold(picocolors.red(dep))}:\n${packageVersions.join(', ')}` + ); } else { - acc.trivial.push(`${chalk.hex('#ff9800')(dep)}:\n${packageVersions.join(', ')}`); + acc.trivial.push(`${picocolors.yellow(dep)}:\n${packageVersions.join(', ')}`); } return acc; @@ -83,7 +85,7 @@ export function getDuplicatedDepsWarnings( if (critical.length > 0) { messages.push( - `${chalk.bold( + `${picocolors.bold( 'Critical:' )} The following dependencies are duplicated and WILL cause unexpected behavior:` ); @@ -92,7 +94,7 @@ export function getDuplicatedDepsWarnings( if (trivial.length > 0) { messages.push( - `${chalk.bold( + `${picocolors.bold( 'Attention:' )} The following dependencies are duplicated which might cause unexpected behavior:` ); @@ -101,14 +103,14 @@ export function getDuplicatedDepsWarnings( messages.push( '\n', - `Please try de-duplicating these dependencies by running ${chalk.cyan( + `Please try de-duplicating these dependencies by running ${picocolors.cyan( `${installationMetadata.dedupeCommand}` )}` ); messages.push( '\n', - `You can find more information for a given dependency by running ${chalk.cyan( + `You can find more information for a given dependency by running ${picocolors.cyan( `${installationMetadata.infoCommand} ` )}` ); diff --git a/code/lib/cli-storybook/src/doctor/getIncompatibleStorybookPackages.test.ts b/code/lib/cli-storybook/src/doctor/getIncompatibleStorybookPackages.test.ts index b804567c9a7a..9ed4ff7b34b0 100644 --- a/code/lib/cli-storybook/src/doctor/getIncompatibleStorybookPackages.test.ts +++ b/code/lib/cli-storybook/src/doctor/getIncompatibleStorybookPackages.test.ts @@ -9,7 +9,7 @@ import { getIncompatibleStorybookPackages, } from './getIncompatibleStorybookPackages'; -vi.mock('chalk', () => { +vi.mock('picocolors', () => { return { default: { yellow: (str: string) => str, diff --git a/code/lib/cli-storybook/src/doctor/getIncompatibleStorybookPackages.ts b/code/lib/cli-storybook/src/doctor/getIncompatibleStorybookPackages.ts index 0c65c5902701..bc2af0904884 100644 --- a/code/lib/cli-storybook/src/doctor/getIncompatibleStorybookPackages.ts +++ b/code/lib/cli-storybook/src/doctor/getIncompatibleStorybookPackages.ts @@ -5,7 +5,7 @@ import { versions as storybookCorePackages, } from 'storybook/internal/common'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import semver from 'semver'; export type AnalysedPackage = { @@ -107,15 +107,15 @@ export const getIncompatiblePackagesSummary = ( if (incompatiblePackages.length > 0) { summaryMessage.push( - `The following packages are incompatible with Storybook ${chalk.bold( + `The following packages are incompatible with Storybook ${picocolors.bold( currentStorybookVersion )} as they depend on different major versions of Storybook packages:` ); incompatiblePackages.forEach( ({ packageName: addonName, packageVersion: addonVersion, homepage, availableUpdate }) => { - const packageDescription = `${chalk.cyan(addonName)}@${chalk.cyan(addonVersion)}`; + const packageDescription = `${picocolors.cyan(addonName)}@${picocolors.cyan(addonVersion)}`; const updateMessage = availableUpdate ? ` (${availableUpdate} available!)` : ''; - const packageRepo = homepage ? `\n Repo: ${chalk.yellow(homepage)}` : ''; + const packageRepo = homepage ? `\n Repo: ${picocolors.yellow(homepage)}` : ''; summaryMessage.push(`- ${packageDescription}${updateMessage}${packageRepo}`); } @@ -125,7 +125,7 @@ export const getIncompatiblePackagesSummary = ( '\n', 'Please consider updating your packages or contacting the maintainers for compatibility details.', 'For more on Storybook 8 compatibility, see the linked GitHub issue:', - chalk.yellow('https://github.com/storybookjs/storybook/issues/26031') + picocolors.yellow('https://github.com/storybookjs/storybook/issues/26031') ); } diff --git a/code/lib/cli-storybook/src/doctor/getMismatchingVersionsWarning.ts b/code/lib/cli-storybook/src/doctor/getMismatchingVersionsWarning.ts index 00cd470c1b28..da07203e6d26 100644 --- a/code/lib/cli-storybook/src/doctor/getMismatchingVersionsWarning.ts +++ b/code/lib/cli-storybook/src/doctor/getMismatchingVersionsWarning.ts @@ -1,7 +1,7 @@ import { frameworkPackages, versions as storybookCorePackages } from 'storybook/internal/common'; import type { InstallationMetadata } from 'storybook/internal/common'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import semver from 'semver'; function getPrimaryVersion(name: string | undefined, installationMetadata?: InstallationMetadata) { @@ -39,7 +39,7 @@ export function getMismatchingVersionsWarnings( } messages.push( - `${chalk.bold( + `${picocolors.bold( 'Attention:' )} There seems to be a mismatch between your Storybook package versions. This can result in a broken Storybook installation.` ); @@ -55,9 +55,9 @@ export function getMismatchingVersionsWarnings( } messages.push( - `The version of your storybook core packages should align with ${chalk.yellow( + `The version of your storybook core packages should align with ${picocolors.yellow( versionToCompare - )} (from the ${chalk.cyan(packageToDisplay)} package) or higher.` + )} (from the ${picocolors.cyan(packageToDisplay)} package) or higher.` ); const filteredDependencies = Object.entries(installationMetadata?.dependencies || []).filter( @@ -78,7 +78,7 @@ export function getMismatchingVersionsWarnings( filteredDependencies .map( ([name, dep]) => - `${chalk.hex('#ff9800')(name)}: ${dep[0].version} ${ + `${picocolors.yellow(name)}: ${dep[0].version} ${ allDependencies?.[name] ? packageJsonSuffix : '' }` ) @@ -91,11 +91,11 @@ export function getMismatchingVersionsWarnings( } messages.push( - `You can run ${chalk.cyan( + `You can run ${picocolors.cyan( 'npx storybook@latest upgrade' )} to upgrade all of your Storybook packages to the latest version. - Alternatively you can try manually changing the versions to match in your package.json. We also recommend regenerating your lockfile, or running the following command to possibly deduplicate your Storybook package versions: ${chalk.cyan( + Alternatively you can try manually changing the versions to match in your package.json. We also recommend regenerating your lockfile, or running the following command to possibly deduplicate your Storybook package versions: ${picocolors.cyan( installationMetadata?.dedupeCommand )}` ); diff --git a/code/lib/cli-storybook/src/doctor/index.ts b/code/lib/cli-storybook/src/doctor/index.ts index 53439e244f00..1c7a03477c80 100644 --- a/code/lib/cli-storybook/src/doctor/index.ts +++ b/code/lib/cli-storybook/src/doctor/index.ts @@ -6,7 +6,7 @@ import { JsPackageManagerFactory, temporaryFile } from 'storybook/internal/commo import type { PackageManagerName } from 'storybook/internal/common'; import boxen from 'boxen'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; import { cleanLog } from '../automigrate/helpers/cleanLog'; @@ -84,7 +84,7 @@ export const doctor = async ({ } catch (err: any) { if (err.message.includes('No configuration files have been found')) { logger.info( - dedent`[Storybook doctor] Could not find or evaluate your Storybook main.js config directory at ${chalk.blue( + dedent`[Storybook doctor] Could not find or evaluate your Storybook main.js config directory at ${picocolors.blue( userSpecifiedConfigDir || '.storybook' )} so the doctor command cannot proceed. You might be running this command in a monorepo or a non-standard project structure. If that is the case, please rerun this command by specifying the path to your Storybook config directory via the --config-dir option.` ); @@ -109,10 +109,10 @@ export const doctor = async ({ if (!('storybook' in allDependencies)) { logDiagnostic( - `Package ${chalk.cyan('storybook')} not found`, + `Package ${picocolors.cyan('storybook')} not found`, dedent` - The ${chalk.cyan('storybook')} package was not found in your package.json. - Installing ${chalk.cyan('storybook')} as a direct dev dependency in your package.json is required. + The ${picocolors.cyan('storybook')} package was not found in your package.json. + Installing ${picocolors.cyan('storybook')} as a direct dev dependency in your package.json is required. ` ); } @@ -151,7 +151,7 @@ export const doctor = async ({ } } - const commandMessage = `You can always recheck the health of your project by running:\n${chalk.cyan( + const commandMessage = `You can always recheck the health of your project by running:\n${picocolors.cyan( 'npx storybook doctor' )}`; logger.info(); @@ -160,7 +160,7 @@ export const doctor = async ({ logger.info(commandMessage); logger.info(); - logger.info(`Full logs are available in ${chalk.cyan(LOG_FILE_PATH)}`); + logger.info(`Full logs are available in ${picocolors.cyan(LOG_FILE_PATH)}`); await rename(TEMP_LOG_FILE_PATH, join(process.cwd(), LOG_FILE_NAME)); } else { diff --git a/code/lib/cli-storybook/src/link.ts b/code/lib/cli-storybook/src/link.ts index 8f0b2ed6718c..5db8d2cbd930 100644 --- a/code/lib/cli-storybook/src/link.ts +++ b/code/lib/cli-storybook/src/link.ts @@ -3,8 +3,8 @@ import { basename, extname, join } from 'node:path'; import { logger } from 'storybook/internal/node-logger'; -import chalk from 'chalk'; import { spawn as spawnAsync, sync as spawnSync } from 'cross-spawn'; +import picocolors from 'picocolors'; type ExecOptions = Parameters[2]; @@ -48,7 +48,7 @@ export const exec = async ( if (code === 0) { resolve(undefined); } else { - logger.error(chalk.red(`An error occurred while executing: \`${command}\``)); + logger.error(picocolors.red(`An error occurred while executing: \`${command}\``)); if (errorMessage) { logger.info(errorMessage); } diff --git a/code/lib/cli-storybook/src/sandbox.ts b/code/lib/cli-storybook/src/sandbox.ts index 9b02ca82dd4e..3b43a05af5d5 100644 --- a/code/lib/cli-storybook/src/sandbox.ts +++ b/code/lib/cli-storybook/src/sandbox.ts @@ -7,9 +7,9 @@ import { JsPackageManagerFactory } from 'storybook/internal/common'; import { versions } from 'storybook/internal/common'; import boxen from 'boxen'; -import chalk from 'chalk'; import { initiate } from 'create-storybook'; import { downloadTemplate } from 'giget'; +import picocolors from 'picocolors'; import prompts from 'prompts'; import { lt, prerelease } from 'semver'; import invariant from 'tiny-invariant'; @@ -57,18 +57,18 @@ export const sandbox = async ({ const branch = isPrerelease ? 'next' : 'main'; const messages = { - welcome: `Creating a Storybook ${chalk.bold(currentVersion)} sandbox..`, - notLatest: chalk.red(dedent` - This version is behind the latest release, which is: ${chalk.bold(latestVersion)}! + welcome: `Creating a Storybook ${picocolors.bold(currentVersion)} sandbox..`, + notLatest: picocolors.red(dedent` + This version is behind the latest release, which is: ${picocolors.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 sandbox')} + ${picocolors.bold('npx storybook@latest sandbox')} You may want to CTRL+C to stop, and run with the latest version instead. `), - longInitTime: chalk.yellow( + longInitTime: picocolors.yellow( 'The creation of the sandbox will take longer, because we will need to run init.' ), - prerelease: chalk.yellow('This is a pre-release version.'), + prerelease: picocolors.yellow('This is a pre-release version.'), }; logger.log( @@ -115,12 +115,12 @@ export const sandbox = async ({ dedent` 🔎 You filtered out all templates. 🔍 - After filtering all the templates with "${chalk.yellow( + After filtering all the templates with "${picocolors.yellow( filterValue )}", we found no results. Please try again with a different filter. Available templates: - ${keys.map((key) => chalk.blue`- ${key}`).join('\n')} + ${keys.map((key) => picocolors.blue(`- ${key}`)).join('\n')} `.trim(), { borderStyle: 'round', padding: 1, borderColor: '#F1618C' } as any ) @@ -134,9 +134,9 @@ export const sandbox = async ({ logger.info( boxen( dedent` - 🤗 Welcome to ${chalk.yellow('sb sandbox')}! 🤗 + 🤗 Welcome to ${picocolors.yellow('sb sandbox')}! 🤗 - Create a ${chalk.green('new project')} to minimally reproduce Storybook issues. + Create a ${picocolors.green('new project')} to minimally reproduce Storybook issues. 1. select an environment that most closely matches your project setup. 2. select a location for the reproduction, outside of your project. @@ -199,7 +199,7 @@ export const sandbox = async ({ logger.info(`🏃 Adding ${selectedConfig.name} into ${templateDestination}`); - logger.log(`📦 Downloading sandbox template (${chalk.bold(downloadType)})...`); + logger.log(`📦 Downloading sandbox template (${picocolors.bold(downloadType)})...`); try { // Download the sandbox based on subfolder "after-storybook" and selected branch const gitPath = `github:storybookjs/sandboxes/${templateId}/${downloadType}#${branch}`; @@ -209,9 +209,9 @@ export const sandbox = async ({ }); // throw an error if templateDestination is an empty directory if ((await readdir(templateDestination)).length === 0) { - const selected = chalk.yellow(templateId); + const selected = picocolors.yellow(templateId); throw new Error(dedent` - Template downloaded from ${chalk.blue(gitPath)} is empty. + Template downloaded from ${picocolors.blue(gitPath)} is empty. Are you use it exists? Or did you want to set ${selected} to inDevelopment first? `); } @@ -237,23 +237,23 @@ export const sandbox = async ({ } const initMessage = init - ? chalk.yellow(dedent` + ? picocolors.yellow(dedent` yarn install yarn storybook `) - : `Recreate your setup, then ${chalk.yellow(`npx storybook@latest init`)}`; + : `Recreate your setup, then ${picocolors.yellow(`npx storybook@latest init`)}`; logger.info( boxen( dedent` 🎉 Your Storybook reproduction project is ready to use! 🎉 - ${chalk.yellow(`cd ${selectedDirectory}`)} + ${picocolors.yellow(`cd ${selectedDirectory}`)} ${initMessage} Once you've recreated the problem you're experiencing, please: - 1. Document any additional steps in ${chalk.cyan('README.md')} + 1. Document any additional steps in ${picocolors.cyan('README.md')} 2. Publish the repository to github 3. Link to the repro repository in your issue diff --git a/code/lib/cli-storybook/src/upgrade.ts b/code/lib/cli-storybook/src/upgrade.ts index b880838199c4..6657fb0ee691 100644 --- a/code/lib/cli-storybook/src/upgrade.ts +++ b/code/lib/cli-storybook/src/upgrade.ts @@ -18,8 +18,8 @@ import { import { telemetry } from 'storybook/internal/telemetry'; import boxen from 'boxen'; -import chalk from 'chalk'; import { sync as spawnSync } from 'cross-spawn'; +import picocolors from 'picocolors'; import semver, { clean, eq, lt, prerelease } from 'semver'; import { dedent } from 'ts-dedent'; @@ -171,17 +171,19 @@ export const doUpgrade = async ({ const borderColor = isCLIOutdated ? '#FC521F' : '#F1618C'; const messages = { - welcome: `Upgrading Storybook from version ${chalk.bold(beforeVersion)} to version ${chalk.bold( - currentCLIVersion - )}..`, - notLatest: chalk.red(dedent` - This version is behind the latest release, which is: ${chalk.bold(latestCLIVersionOnNPM)}! + welcome: `Upgrading Storybook from version ${picocolors.bold( + beforeVersion + )} to version ${picocolors.bold(currentCLIVersion)}..`, + notLatest: picocolors.red(dedent` + This version is behind the latest release, which is: ${picocolors.bold( + latestCLIVersionOnNPM + )}! You likely ran the upgrade command through npx, which can use a locally cached version, to upgrade to the latest version please run: - ${chalk.bold('npx storybook@latest upgrade')} + ${picocolors.bold('npx storybook@latest upgrade')} You may want to CTRL+C to stop, and run with the latest version instead. `), - prerelease: chalk.yellow('This is a pre-release version.'), + prerelease: picocolors.yellow('This is a pre-release version.'), }; logger.plain( @@ -252,7 +254,7 @@ export const doUpgrade = async ({ const upgradedDependencies = toUpgradedDependencies(packageJson.dependencies); const upgradedDevDependencies = toUpgradedDependencies(packageJson.devDependencies); - logger.info(`Updating dependencies in ${chalk.cyan('package.json')}..`); + logger.info(`Updating dependencies in ${picocolors.cyan('package.json')}..`); if (upgradedDependencies.length > 0) { await packageManager.addDependencies( { installAsDevDependencies: false, skipInstall: true, packageJson }, diff --git a/code/lib/create-storybook/package.json b/code/lib/create-storybook/package.json index 5f6e9e5dd1ce..0a80d09e97ca 100644 --- a/code/lib/create-storybook/package.json +++ b/code/lib/create-storybook/package.json @@ -56,7 +56,6 @@ }, "dependencies": { "@types/semver": "^7.3.4", - "chalk": "^4.1.0", "commander": "^12.1.0", "execa": "^5.0.0", "fd-package-json": "^1.2.0", @@ -73,6 +72,7 @@ "@types/prompts": "^2.0.9", "@types/util-deprecate": "^1.0.0", "boxen": "^7.1.1", + "picocolors": "^1.1.0", "typescript": "^5.3.2" }, "publishConfig": { diff --git a/code/lib/create-storybook/src/initiate.ts b/code/lib/create-storybook/src/initiate.ts index bed1870fd2a9..adf25ebd5107 100644 --- a/code/lib/create-storybook/src/initiate.ts +++ b/code/lib/create-storybook/src/initiate.ts @@ -17,8 +17,8 @@ import { NxProjectDetectedError } from 'storybook/internal/server-errors'; import { telemetry } from 'storybook/internal/telemetry'; import boxen from 'boxen'; -import chalk from 'chalk'; import findUp from 'find-up'; +import picocolors from 'picocolors'; import prompts from 'prompts'; import { lt, prerelease } from 'semver'; import { dedent } from 'ts-dedent'; @@ -185,7 +185,7 @@ const installStorybook = async ( return await runGenerator(); } catch (err: any) { if (err?.message !== 'Canceled by the user' && err?.stack) { - logger.error(`\n ${chalk.red(err.stack)}`); + logger.error(`\n ${picocolors.red(err.stack)}`); } throw new HandledError(err); } @@ -250,15 +250,15 @@ export async function doInitiate(options: CommandOptions): Promise< 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)}! + welcome: `Adding Storybook version ${picocolors.bold(currentVersion)} to your project..`, + notLatest: picocolors.red(dedent` + This version is behind the latest release, which is: ${picocolors.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')} + ${picocolors.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.'), + prelease: picocolors.yellow('This is a pre-release version.'), }; logger.log( @@ -348,22 +348,22 @@ export async function doInitiate(options: CommandOptions): Promise< if (projectType === ProjectType.REACT_NATIVE) { logger.log(dedent` - ${chalk.yellow('NOTE: installation is not 100% automated.')} + ${picocolors.yellow('NOTE: installation is not 100% automated.')} To run Storybook, you will need to: 1. Replace the contents of your app entry with the following - ${chalk.inverse(' ' + "export {default} from './.storybook';" + ' ')} + ${picocolors.inverse(' ' + "export {default} from './.storybook';" + ' ')} 2. Enable transformer.unstable_allowRequireContext in your metro config For a more detailed guide go to: - ${chalk.cyan('https://github.com/storybookjs/react-native#existing-project')} + ${picocolors.cyan('https://github.com/storybookjs/react-native#existing-project')} Then to run your Storybook, type: - ${chalk.inverse(' ' + packageManager.getRunCommand('start') + ' ')} + ${picocolors.inverse(' ' + packageManager.getRunCommand('start') + ' ')} `); @@ -388,12 +388,14 @@ export async function doInitiate(options: CommandOptions): Promise< boxen( dedent` Storybook was successfully installed in your project! 🎉 - To run Storybook manually, run ${chalk.yellow( - chalk.bold(storybookCommand) + To run Storybook manually, run ${picocolors.yellow( + picocolors.bold(storybookCommand) )}. CTRL+C to stop. - Wanna know more about Storybook? Check out ${chalk.cyan('https://storybook.js.org/')} - Having trouble or want to chat? Join us at ${chalk.cyan('https://discord.gg/storybook/')} + Wanna know more about Storybook? Check out ${picocolors.cyan('https://storybook.js.org/')} + Having trouble or want to chat? Join us at ${picocolors.cyan( + 'https://discord.gg/storybook/' + )} `, { borderStyle: 'round', padding: 1, borderColor: '#F1618C' } ) diff --git a/code/lib/create-storybook/src/scaffold-new-project.ts b/code/lib/create-storybook/src/scaffold-new-project.ts index f2d64fa794bd..f41d9c876010 100644 --- a/code/lib/create-storybook/src/scaffold-new-project.ts +++ b/code/lib/create-storybook/src/scaffold-new-project.ts @@ -7,8 +7,8 @@ import { GenerateNewProjectOnInitError } from 'storybook/internal/server-errors' import { telemetry } from 'storybook/internal/telemetry'; import boxen from 'boxen'; -import chalk from 'chalk'; import execa from 'execa'; +import picocolors from 'picocolors'; import prompts from 'prompts'; import { dedent } from 'ts-dedent'; @@ -102,7 +102,7 @@ const packageManagerToCoercedName = ( const buildProjectDisplayNameForPrint = ({ displayName }: SupportedProject) => { const { type, builder, language } = displayName; - return `${chalk.bold.blue(type)} ${builder ? `+ ${builder} ` : ''}(${language})`; + return `${picocolors.bold(picocolors.blue(type))} ${builder ? `+ ${builder} ` : ''}(${language})`; }; /** @@ -121,14 +121,14 @@ export const scaffoldNewProject = async ( dedent` Would you like to generate a new project from the following list? - ${chalk.bold('Note:')} + ${picocolors.bold('Note:')} Storybook supports many more frameworks and bundlers than listed below. If you don't see your preferred setup, you can still generate a project then rerun this command to add Storybook. - ${chalk.bold('Press ^C at any time to quit.')} + ${picocolors.bold('Press ^C at any time to quit.')} `, { - title: chalk.bold('🔎 Empty directory detected'), + title: picocolors.bold('🔎 Empty directory detected'), padding: 1, borderStyle: 'double', borderColor: 'yellow', @@ -166,7 +166,7 @@ export const scaffoldNewProject = async ( logger.line(1); logger.plain( - `Creating a new "${projectDisplayName}" project with ${chalk.bold(packageManagerName)}...` + `Creating a new "${projectDisplayName}" project with ${picocolors.bold(packageManagerName)}...` ); logger.line(1); @@ -202,12 +202,14 @@ export const scaffoldNewProject = async ( logger.plain( boxen( dedent` - "${projectDisplayName}" project with ${chalk.bold(packageManagerName)} created successfully! + "${projectDisplayName}" project with ${picocolors.bold( + packageManagerName + )} created successfully! Continuing with Storybook installation... `, { - title: chalk.bold('✅ Success!'), + title: picocolors.bold('✅ Success!'), padding: 1, borderStyle: 'double', borderColor: 'green', diff --git a/code/renderers/react/src/__test__/__snapshots__/portable-stories-legacy.test.tsx.snap b/code/renderers/react/src/__test__/__snapshots__/portable-stories-legacy.test.tsx.snap index b690349bed8d..b4753327aaf1 100644 --- a/code/renderers/react/src/__test__/__snapshots__/portable-stories-legacy.test.tsx.snap +++ b/code/renderers/react/src/__test__/__snapshots__/portable-stories-legacy.test.tsx.snap @@ -147,40 +147,6 @@ exports[`Legacy Portable Stories API > Renders Modal story 1`] = ` `; -exports[`Legacy Portable Stories API > Renders MountInPlayFunction story 1`] = ` - -
-
- loaded data -
-
- mockFn return value -
-
- -`; - -exports[`Legacy Portable Stories API > Renders MountInPlayFunctionThrow story 1`] = ` - -
-
- loaded data -
-
- mockFn return value -
-
- -`; - exports[`Legacy Portable Stories API > Renders WithActionArg story 1`] = `
diff --git a/code/yarn.lock b/code/yarn.lock index e9470b5d33b1..a3ab66666dda 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5883,7 +5883,6 @@ __metadata: "@types/prompts": "npm:^2.0.9" "@types/semver": "npm:^7.3.4" boxen: "npm:^7.1.1" - chalk: "npm:^4.1.0" commander: "npm:^12.1.0" create-storybook: "workspace:*" cross-spawn: "npm:^7.0.3" @@ -5895,6 +5894,7 @@ __metadata: globby: "npm:^14.0.1" jscodeshift: "npm:^0.15.1" leven: "npm:^3.1.0" + picocolors: "npm:^1.1.0" prompts: "npm:^2.4.0" semver: "npm:^7.3.7" slash: "npm:^5.0.0" @@ -6055,7 +6055,6 @@ __metadata: browser-dtector: "npm:^3.4.0" camelcase: "npm:^8.0.0" chai: "npm:^4.4.1" - chalk: "npm:^5.3.0" cli-table3: "npm:^0.6.1" commander: "npm:^12.1.0" comment-parser: "npm:^1.4.1" @@ -6098,6 +6097,7 @@ __metadata: nanoid: "npm:^4.0.2" npmlog: "npm:^7.0.0" open: "npm:^8.4.0" + picocolors: "npm:^1.1.0" picomatch: "npm:^2.3.0" picoquery: "npm:^1.4.0" polished: "npm:^4.2.2" @@ -6238,6 +6238,7 @@ __metadata: "@vitest/browser": "npm:^2.0.0" boxen: "npm:^8.0.1" find-up: "npm:^7.0.0" + picocolors: "npm:^1.1.0" semver: "npm:^7.6.3" tinyrainbow: "npm:^1.2.0" ts-dedent: "npm:^2.2.0" @@ -12464,12 +12465,12 @@ __metadata: "@types/semver": "npm:^7.3.4" "@types/util-deprecate": "npm:^1.0.0" boxen: "npm:^7.1.1" - chalk: "npm:^4.1.0" commander: "npm:^12.1.0" execa: "npm:^5.0.0" fd-package-json: "npm:^1.2.0" find-up: "npm:^5.0.0" ora: "npm:^5.4.1" + picocolors: "npm:^1.1.0" prettier: "npm:^3.1.1" prompts: "npm:^2.4.0" semver: "npm:^7.3.7" @@ -22628,10 +22629,10 @@ __metadata: languageName: node linkType: hard -"picocolors@npm:^1.0.0, picocolors@npm:^1.0.1": - version: 1.0.1 - resolution: "picocolors@npm:1.0.1" - checksum: 10c0/c63cdad2bf812ef0d66c8db29583802355d4ca67b9285d846f390cc15c2f6ccb94e8cb7eb6a6e97fc5990a6d3ad4ae42d86c84d3146e667c739a4234ed50d400 +"picocolors@npm:^1.0.0, picocolors@npm:^1.0.1, picocolors@npm:^1.1.0": + version: 1.1.0 + resolution: "picocolors@npm:1.1.0" + checksum: 10c0/86946f6032148801ef09c051c6fb13b5cf942eaf147e30ea79edb91dd32d700934edebe782a1078ff859fb2b816792e97ef4dab03d7f0b804f6b01a0df35e023 languageName: node linkType: hard diff --git a/scripts/build-package.ts b/scripts/build-package.ts index 60ac5b012e13..96ddb84c2fbc 100644 --- a/scripts/build-package.ts +++ b/scripts/build-package.ts @@ -1,8 +1,8 @@ -import chalk from 'chalk'; import { program } from 'commander'; import { execaCommand } from 'execa'; import { readJSON } from 'fs-extra'; import { posix, resolve, sep } from 'path'; +import picocolors from 'picocolors'; import prompts from 'prompts'; import windowSize from 'window-size'; @@ -63,7 +63,9 @@ async function run() { ...packageTasks, }; - const main = program.version('5.0.0').option('--all', `build everything ${chalk.gray('(all)')}`); + const main = program + .version('5.0.0') + .option('--all', `build everything ${picocolors.gray('(all)')}`); Object.keys(tasks) .reduce((acc, key) => acc.option(tasks[key].suffix, tasks[key].helpText), main) @@ -154,10 +156,10 @@ async function run() { ); sub.stdout?.on('data', (data) => { - process.stdout.write(`${chalk.cyan(v.name)}:\n${data}`); + process.stdout.write(`${picocolors.cyan(v.name)}:\n${data}`); }); sub.stderr?.on('data', (data) => { - process.stderr.write(`${chalk.red(v.name)}:\n${data}`); + process.stderr.write(`${picocolors.red(v.name)}:\n${data}`); }); }); } diff --git a/scripts/check-package.ts b/scripts/check-package.ts index c8873e6cf846..8b9c49985fb5 100644 --- a/scripts/check-package.ts +++ b/scripts/check-package.ts @@ -1,11 +1,11 @@ // This script makes sure that we can support type checking, // without having to build dts files for all packages in the monorepo. // It is not implemented yet for angular, svelte and vue. -import chalk from 'chalk'; import { program } from 'commander'; import { execaCommand } from 'execa'; import { readJSON } from 'fs-extra'; import { resolve } from 'path'; +import picocolors from 'picocolors'; import prompts from 'prompts'; import windowSize from 'window-size'; @@ -53,7 +53,9 @@ async function run() { ...packageTasks, }; - const main = program.version('5.0.0').option('--all', `check everything ${chalk.gray('(all)')}`); + const main = program + .version('5.0.0') + .option('--all', `check everything ${picocolors.gray('(all)')}`); Object.keys(tasks) .reduce((acc, key) => acc.option(tasks[key].suffix, tasks[key].helpText), main) @@ -122,10 +124,10 @@ async function run() { }); sub.stdout.on('data', (data) => { - process.stdout.write(`${chalk.cyan(v.name)}:\n${data}`); + process.stdout.write(`${picocolors.cyan(v.name)}:\n${data}`); }); sub.stderr.on('data', (data) => { - process.stderr.write(`${chalk.red(v.name)}:\n${data}`); + process.stderr.write(`${picocolors.red(v.name)}:\n${data}`); }); }); } diff --git a/scripts/dangerfile.ts b/scripts/dangerfile.ts index 51a144e550cf..93382ae441cf 100644 --- a/scripts/dangerfile.ts +++ b/scripts/dangerfile.ts @@ -1,4 +1,4 @@ -/* eslint-disable import/extensions */ +/* eslint-disable import/no-extraneous-dependencies, import/extensions */ import { execSync } from 'child_process'; import { danger, fail } from 'danger'; diff --git a/scripts/event-log-checker.ts b/scripts/event-log-checker.ts index 4893eaeb449c..403bde0b51f5 100644 --- a/scripts/event-log-checker.ts +++ b/scripts/event-log-checker.ts @@ -1,5 +1,5 @@ import assert from 'assert'; -import chalk from 'chalk'; +import picocolors from 'picocolors'; import versions from '../code/core/src/common/versions'; import { oneWayHash } from '../code/core/src/telemetry/one-way-hash'; @@ -89,8 +89,8 @@ async function run() { }); } catch (err) { if (err instanceof assert.AssertionError) { - console.log(`Assertions failed for ${chalk.bold(templateName)}\n`); - console.log(chalk.bold(chalk.red`✕ ${testMessage}:`)); + console.log(`Assertions failed for ${picocolors.bold(templateName)}\n`); + console.log(picocolors.bold(picocolors.red(`✕ ${testMessage}:`))); console.log(err); process.exit(1); } diff --git a/scripts/get-template.ts b/scripts/get-template.ts index 28b390c665bd..728632392489 100644 --- a/scripts/get-template.ts +++ b/scripts/get-template.ts @@ -1,7 +1,7 @@ -import chalk from 'chalk'; import { program } from 'commander'; import { pathExists, readFile } from 'fs-extra'; import { readdir } from 'fs/promises'; +import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; import yaml from 'yaml'; @@ -103,7 +103,7 @@ async function checkParallelism(cadence?: Cadence, scriptName?: TaskKey) { let isIncorrect = false; cadences.forEach((cad) => { - summary.push(`\n${chalk.bold(cad)}`); + summary.push(`\n${picocolors.bold(cad)}`); const cadenceTemplates = Object.entries(allTemplates).filter(([key]) => templatesByCadence[cad].includes(key as TemplateKey) ); @@ -129,7 +129,7 @@ async function checkParallelism(cadence?: Cadence, scriptName?: TaskKey) { if (newParallelism !== currentParallelism) { summary.push( - `-- ❌ ${tasksMap[script]} - parallelism: ${currentParallelism} ${chalk.bgRed( + `-- ❌ ${tasksMap[script]} - parallelism: ${currentParallelism} ${picocolors.bgRed( `(should be ${newParallelism})` )}` ); diff --git a/scripts/knip.config.ts b/scripts/knip.config.ts index e9a90982e3cb..ef23f8c556bd 100644 --- a/scripts/knip.config.ts +++ b/scripts/knip.config.ts @@ -70,7 +70,10 @@ const baseConfig = { export const addBundlerEntries = async (config: KnipConfig) => { const baseDir = join(__dirname, '../code'); const rootManifest = await import(join(baseDir, 'package.json')); - const workspaceDirs = await fg(rootManifest.workspaces.packages, { cwd: baseDir, onlyDirectories: true }); + const workspaceDirs = await fg(rootManifest.workspaces.packages, { + cwd: baseDir, + onlyDirectories: true, + }); const workspaceDirectories = workspaceDirs.map((dir) => relative(baseDir, join(baseDir, dir))); for (const wsDir of workspaceDirectories) { for (const configKey of Object.keys(baseConfig.workspaces)) { diff --git a/scripts/package.json b/scripts/package.json index 456ba6c06038..21507314596a 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -96,7 +96,6 @@ "@vitest/coverage-v8": "^2.0.5", "ansi-regex": "^6.0.1", "browser-assert": "^1.2.1", - "chalk": "^4.1.0", "chromatic": "^11.5.5", "codecov": "^3.8.1", "commander": "^12.1.0", @@ -138,11 +137,13 @@ "knip": "^5.30.1", "lint-staged": "^15.2.7", "memoizerific": "^1.11.3", + "minimatch": "^10.0.1", "node-gyp": "^9.3.1", "nx": "18.0.6", "ora": "^5.4.1", "p-limit": "^3.1.0", "p-retry": "^5.1.2", + "picocolors": "^1.1.0", "playwright": "1.46.0", "playwright-core": "1.46.0", "prettier": "^3.3.2", diff --git a/scripts/prepare/tools.ts b/scripts/prepare/tools.ts index 5b81ed2b3f62..eb4214a945ba 100644 --- a/scripts/prepare/tools.ts +++ b/scripts/prepare/tools.ts @@ -3,12 +3,12 @@ import { dirname, join } from 'node:path'; import * as process from 'node:process'; import { globalExternals } from '@fal-works/esbuild-plugin-global-externals'; -import chalk from 'chalk'; import { spawn } from 'cross-spawn'; import * as esbuild from 'esbuild'; import { readJson } from 'fs-extra'; import { glob } from 'glob'; import limit from 'p-limit'; +import picocolors from 'picocolors'; import * as prettier from 'prettier'; import prettyTime from 'pretty-hrtime'; import * as rollup from 'rollup'; @@ -103,7 +103,7 @@ export { process, esbuild, prettyTime, - chalk, + picocolors, dedent, limit, sortPackageJson, diff --git a/scripts/release/cancel-preparation-runs.ts b/scripts/release/cancel-preparation-runs.ts index aa5916de8208..b3d922dbef5a 100644 --- a/scripts/release/cancel-preparation-runs.ts +++ b/scripts/release/cancel-preparation-runs.ts @@ -2,8 +2,8 @@ * This script cancels all running preparation workflows in GitHub. It will fetch all active runs * for the preparation workflows, and cancel them. */ -import chalk from 'chalk'; import { program } from 'commander'; +import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; import { esMain } from '../utils/esmain'; @@ -35,12 +35,12 @@ export const run = async () => { )?.id; console.log(`Found workflow IDs for the preparation workflows: - ${chalk.blue(PREPARE_PATCH_WORKFLOW_PATH)}: ${chalk.green(preparePatchWorkflowId)} - ${chalk.blue(PREPARE_NON_PATCH_WORKFLOW_PATH)}: ${chalk.green(prepareNonPatchWorkflowId)}`); + ${picocolors.blue(PREPARE_PATCH_WORKFLOW_PATH)}: ${picocolors.green(preparePatchWorkflowId)} + ${picocolors.blue(PREPARE_NON_PATCH_WORKFLOW_PATH)}: ${picocolors.green(prepareNonPatchWorkflowId)}`); if (!preparePatchWorkflowId || !prepareNonPatchWorkflowId) { throw new Error(dedent`🚨 Could not find workflow IDs for the preparation workflows - - Looked for paths: "${chalk.blue(PREPARE_PATCH_WORKFLOW_PATH)}" and "${chalk.blue( + - Looked for paths: "${picocolors.blue(PREPARE_PATCH_WORKFLOW_PATH)}" and "${picocolors.blue( PREPARE_NON_PATCH_WORKFLOW_PATH )}", are they still correct? - Found workflows: @@ -75,7 +75,10 @@ export const run = async () => { console.log(`🔍 Found ${runsToCancel.length} runs to cancel. Cancelling them now: ${runsToCancel - .map((r) => `${chalk.green(r.path)} - ${chalk.green(r.id)}: ${chalk.blue(r.status)}`) + .map( + (r) => + `${picocolors.green(r.path)} - ${picocolors.green(r.id)}: ${picocolors.blue(r.status)}` + ) .join('\n ')}`); const result = await Promise.allSettled( diff --git a/scripts/release/generate-pr-description.ts b/scripts/release/generate-pr-description.ts index f1a79da2d6db..0d569e20e01b 100644 --- a/scripts/release/generate-pr-description.ts +++ b/scripts/release/generate-pr-description.ts @@ -1,6 +1,6 @@ import { setOutput } from '@actions/core'; -import chalk from 'chalk'; import { program } from 'commander'; +import picocolors from 'picocolors'; import semver from 'semver'; import { dedent } from 'ts-dedent'; import { z } from 'zod'; @@ -246,9 +246,9 @@ export const run = async (rawOptions: unknown) => { const currentVersion = options.currentVersion || (await getCurrentVersion()); console.log( - `💬 Generating PR description for ${chalk.blue(nextVersion)} between ${chalk.green( + `💬 Generating PR description for ${picocolors.blue(nextVersion)} between ${picocolors.green( currentVersion - )} and ${chalk.green('HEAD')}` + )} and ${picocolors.green('HEAD')}` ); const { changes, changelogText } = await getChanges({ @@ -289,7 +289,7 @@ export const run = async (rawOptions: unknown) => { if (process.env.GITHUB_ACTIONS === 'true') { setOutput('description', description); } - console.log(`✅ Generated PR description for ${chalk.blue(nextVersion)}`); + console.log(`✅ Generated PR description for ${picocolors.blue(nextVersion)}`); if (verbose) { console.log(description); } diff --git a/scripts/release/get-changelog-from-file.ts b/scripts/release/get-changelog-from-file.ts index f428310cc656..354605e04644 100644 --- a/scripts/release/get-changelog-from-file.ts +++ b/scripts/release/get-changelog-from-file.ts @@ -1,9 +1,9 @@ import { join } from 'node:path'; import { setOutput } from '@actions/core'; -import chalk from 'chalk'; import { program } from 'commander'; import { readFile } from 'fs-extra'; +import picocolors from 'picocolors'; import semver from 'semver'; import { dedent } from 'ts-dedent'; @@ -29,13 +29,13 @@ export const getChangelogFromFile = async (args: { const changelogFilename = isPrerelease ? 'CHANGELOG.prerelease.md' : 'CHANGELOG.md'; const changelogPath = join(__dirname, '..', '..', changelogFilename); - console.log(`📝 Getting changelog from ${chalk.blue(changelogPath)}`); + console.log(`📝 Getting changelog from ${picocolors.blue(changelogPath)}`); const fullChangelog = await readFile(changelogPath, 'utf-8'); const changelogForVersion = fullChangelog.split(/(^|\n)## /).find((v) => v.startsWith(version)); if (!changelogForVersion) { throw new Error( - `Could not find changelog entry for version ${chalk.blue(version)} in ${chalk.green( + `Could not find changelog entry for version ${picocolors.blue(version)} in ${picocolors.green( changelogPath )}` ); diff --git a/scripts/release/get-current-version.ts b/scripts/release/get-current-version.ts index f640ccb5907e..8530f6cf9646 100644 --- a/scripts/release/get-current-version.ts +++ b/scripts/release/get-current-version.ts @@ -1,8 +1,8 @@ import { join } from 'node:path'; import { setOutput } from '@actions/core'; -import chalk from 'chalk'; import { readJson } from 'fs-extra'; +import picocolors from 'picocolors'; import { esMain } from '../utils/esmain'; @@ -15,7 +15,7 @@ export const getCurrentVersion = async () => { if (process.env.GITHUB_ACTIONS === 'true') { setOutput('current-version', version); } - console.log(`📦 Current version is ${chalk.green(version)}`); + console.log(`📦 Current version is ${picocolors.green(version)}`); return version; }; diff --git a/scripts/release/get-version-changelog.ts b/scripts/release/get-version-changelog.ts index 6e1af6a7b5b7..e85ac5257643 100644 --- a/scripts/release/get-version-changelog.ts +++ b/scripts/release/get-version-changelog.ts @@ -1,6 +1,6 @@ import { setOutput } from '@actions/core'; -import chalk from 'chalk'; import { program } from 'commander'; +import picocolors from 'picocolors'; import { esMain } from '../utils/esmain'; import { getCurrentVersion } from './get-current-version'; @@ -17,7 +17,7 @@ program export const getVersionChangelog = async (args: { version?: string; verbose?: boolean }) => { const version = args.version || (await getCurrentVersion()); - console.log(`📝 Getting changelog for version ${chalk.blue(version)}`); + console.log(`📝 Getting changelog for version ${picocolors.blue(version)}`); const { changelogText } = await getChanges({ from: version, version, verbose: args.verbose }); diff --git a/scripts/release/is-pr-frozen.ts b/scripts/release/is-pr-frozen.ts index af5a957af8ae..d8c80708fc71 100644 --- a/scripts/release/is-pr-frozen.ts +++ b/scripts/release/is-pr-frozen.ts @@ -1,9 +1,9 @@ import { join } from 'node:path'; import { setOutput } from '@actions/core'; -import chalk from 'chalk'; import { program } from 'commander'; import { readJson } from 'fs-extra'; +import picocolors from 'picocolors'; import { esMain } from '../utils/esmain'; import { getPullInfoFromCommit } from './utils/get-github-info'; @@ -39,7 +39,7 @@ const getRepo = async (verbose?: boolean): Promise => { const pushUrl = originRemote.refs.push; const repo = pushUrl.replace(/\.git$/, '').replace(/.*:(\/\/github\.com\/)*/, ''); if (verbose) { - console.log(`📦 Extracted repo: ${chalk.blue(repo)}`); + console.log(`📦 Extracted repo: ${picocolors.blue(repo)}`); } return repo; }; @@ -50,7 +50,7 @@ export const run = async (options: unknown) => { const version = await getCurrentVersion(); const branch = `version-${patch ? 'patch' : 'non-patch'}-from-${version}`; - console.log(`💬 Determining if pull request from branch '${chalk.blue(branch)}' is frozen`); + console.log(`💬 Determining if pull request from branch '${picocolors.blue(branch)}' is frozen`); console.log(`⬇️ Fetching remote 'origin/${branch}'...`); try { diff --git a/scripts/release/is-prerelease.ts b/scripts/release/is-prerelease.ts index d92f17279b82..65b2ddf0ddc7 100644 --- a/scripts/release/is-prerelease.ts +++ b/scripts/release/is-prerelease.ts @@ -1,6 +1,6 @@ import { setOutput } from '@actions/core'; -import chalk from 'chalk'; import { program } from 'commander'; +import picocolors from 'picocolors'; import semver from 'semver'; import { esMain } from '../utils/esmain'; @@ -17,10 +17,10 @@ program export const isPrerelease = async (args: { version?: string; verbose?: boolean }) => { if (args.verbose) { if (args.version) { - console.log(`📦 Checking if version ${chalk.blue(args.version)} is a prerelease`); + console.log(`📦 Checking if version ${picocolors.blue(args.version)} is a prerelease`); } else { console.log( - `📦 Checking if current version in ${chalk.blue('code/package.json')} is a prerelease` + `📦 Checking if current version in ${picocolors.blue('code/package.json')} is a prerelease` ); } } @@ -31,8 +31,8 @@ export const isPrerelease = async (args: { version?: string; verbose?: boolean } setOutput('prerelease', result); } console.log( - `📦 Version ${chalk.blue(version)} ${ - result ? chalk.green('IS') : chalk.red('IS NOT') + `📦 Version ${picocolors.blue(version)} ${ + result ? picocolors.green('IS') : picocolors.red('IS NOT') } a prerelease` ); diff --git a/scripts/release/is-version-published.ts b/scripts/release/is-version-published.ts index 6af757eb654c..a6a6891b2124 100644 --- a/scripts/release/is-version-published.ts +++ b/scripts/release/is-version-published.ts @@ -1,6 +1,6 @@ import { setOutput } from '@actions/core'; -import chalk from 'chalk'; import { program } from 'commander'; +import picocolors from 'picocolors'; import { esMain } from '../utils/esmain'; import { getCurrentVersion } from './get-current-version'; @@ -19,12 +19,14 @@ const isVersionPublished = async ({ version: string; verbose?: boolean; }) => { - const prettyPackage = `${chalk.blue(packageName)}@${chalk.green(version)}`; + const prettyPackage = `${picocolors.blue(packageName)}@${picocolors.green(version)}`; console.log(`⛅ Checking if ${prettyPackage} is published...`); if (verbose) { console.log(`Fetching from npm:`); - console.log(`https://registry.npmjs.org/${chalk.blue(packageName)}/${chalk.green(version)}`); + console.log( + `https://registry.npmjs.org/${picocolors.blue(packageName)}/${picocolors.green(version)}` + ); } const response = await fetch(`https://registry.npmjs.org/${packageName}/${version}`); if (response.status === 404) { diff --git a/scripts/release/pick-patches.ts b/scripts/release/pick-patches.ts index 824f8c6d0cd9..d25667cc4974 100644 --- a/scripts/release/pick-patches.ts +++ b/scripts/release/pick-patches.ts @@ -1,7 +1,7 @@ import { setOutput } from '@actions/core'; -import chalk from 'chalk'; import { program } from 'commander'; import ora from 'ora'; +import picocolors from 'picocolors'; import invariant from 'tiny-invariant'; import { esMain } from '../utils/esmain'; @@ -25,7 +25,7 @@ interface PR { } function formatPR(pr: PR): string { - return `https://github.com/${OWNER}/${REPO}/pull/${pr.number} "${pr.title}" ${chalk.yellow( + return `https://github.com/${OWNER}/${REPO}/pull/${pr.number} "${pr.title}" ${picocolors.yellow( pr.mergeCommit )}`; } @@ -71,7 +71,7 @@ export const run = async (_: unknown) => { } failedCherryPicks.push(pr.mergeCommit); prSpinner.info( - `This PR can be picked manually with: ${chalk.grey( + `This PR can be picked manually with: ${picocolors.gray( `git cherry-pick -m1 -x ${pr.mergeCommit}` )}` ); diff --git a/scripts/release/publish.ts b/scripts/release/publish.ts index 65347010181d..83839dd4a003 100644 --- a/scripts/release/publish.ts +++ b/scripts/release/publish.ts @@ -1,10 +1,10 @@ import { join } from 'node:path'; -import chalk from 'chalk'; import { program } from 'commander'; import { execaCommand } from 'execa'; import { readJson } from 'fs-extra'; import pRetry from 'p-retry'; +import picocolors from 'picocolors'; import semver from 'semver'; import dedent from 'ts-dedent'; import { z } from 'zod'; @@ -51,7 +51,7 @@ const getCurrentVersion = async (verbose?: boolean) => { console.log(`📐 Reading current version of Storybook...`); } const { version } = await readJson(CODE_PACKAGE_JSON_PATH); - console.log(`📐 Current version of Storybook is ${chalk.green(version)}`); + console.log(`📐 Current version of Storybook is ${picocolors.green(version)}`); return version; }; @@ -64,13 +64,13 @@ const isCurrentVersionPublished = async ({ currentVersion: string; verbose?: boolean; }) => { - const prettyPackage = `${chalk.blue(packageName)}@${chalk.green(currentVersion)}`; + const prettyPackage = `${picocolors.blue(packageName)}@${picocolors.green(currentVersion)}`; console.log(`⛅ Checking if ${prettyPackage} is published...`); if (verbose) { console.log(`Fetching from npm:`); console.log( - `https://registry.npmjs.org/${chalk.blue(packageName)}/${chalk.green(currentVersion)}` + `https://registry.npmjs.org/${picocolors.blue(packageName)}/${picocolors.green(currentVersion)}` ); } const response = await fetch(`https://registry.npmjs.org/${packageName}/${currentVersion}`); @@ -133,7 +133,7 @@ const publishAllPackages = async ({ } if (dryRun) { console.log(`📦 Dry run, skipping publish. Would have executed: - ${chalk.blue(command)}`); + ${picocolors.blue(command)}`); return; } @@ -155,7 +155,7 @@ const publishAllPackages = async ({ retries: 4, onFailedAttempt: (error) => console.log( - chalk.yellow( + picocolors.yellow( dedent`❗One or more packages failed to publish, retrying... This was attempt number ${error.attemptNumber}, there are ${error.retriesLeft} retries left. 🤞` ) @@ -180,15 +180,15 @@ export const run = async (options: unknown) => { }); if (isAlreadyPublished) { throw new Error( - `⛔ Current version (${chalk.green(currentVersion)}) is already published, aborting.` + `⛔ Current version (${picocolors.green(currentVersion)}) is already published, aborting.` ); } await buildAllPackages(); await publishAllPackages({ tag, verbose, dryRun }); console.log( - `✅ Published all packages with version ${chalk.green(currentVersion)}${ - tag ? ` at tag ${chalk.blue(tag)}` : '' + `✅ Published all packages with version ${picocolors.green(currentVersion)}${ + tag ? ` at tag ${picocolors.blue(tag)}` : '' }` ); }; diff --git a/scripts/release/unreleased-changes-exists.ts b/scripts/release/unreleased-changes-exists.ts index 217bfa033a47..ad869461107b 100644 --- a/scripts/release/unreleased-changes-exists.ts +++ b/scripts/release/unreleased-changes-exists.ts @@ -1,7 +1,7 @@ import { setOutput } from '@actions/core'; -import chalk from 'chalk'; import { program } from 'commander'; import { intersection } from 'es-toolkit'; +import picocolors from 'picocolors'; import { z } from 'zod'; import { esMain } from '../utils/esmain'; @@ -68,11 +68,11 @@ export const run = async ( } if (hasChangesToRelease) { console.log( - `${chalk.green('🦋 The following changes are releasable')}: -${chalk.blue(changesToRelease.map(({ title, pull }) => ` #${pull}: ${title}`).join('\n'))}` + `${picocolors.green('🦋 The following changes are releasable')}: +${picocolors.blue(changesToRelease.map(({ title, pull }) => ` #${pull}: ${title}`).join('\n'))}` ); } else { - console.log(chalk.red('🫙 No changes to release!')); + console.log(picocolors.red('🫙 No changes to release!')); } return { changesToRelease, hasChangesToRelease }; diff --git a/scripts/release/utils/get-changes.ts b/scripts/release/utils/get-changes.ts index 5588a10eba52..f7f255ddd451 100644 --- a/scripts/release/utils/get-changes.ts +++ b/scripts/release/utils/get-changes.ts @@ -1,4 +1,4 @@ -import chalk from 'chalk'; +import picocolors from 'picocolors'; import semver from 'semver'; import type { PullRequestInfo } from './get-github-info'; @@ -27,13 +27,15 @@ export const LABELS_BY_IMPORTANCE = { const getCommitAt = async (id: string, verbose?: boolean) => { if (!semver.valid(id)) { - console.log(`🔍 ${chalk.red(id)} is not a valid semver string, assuming it is a commit hash`); + console.log( + `🔍 ${picocolors.red(id)} is not a valid semver string, assuming it is a commit hash` + ); return id; } const version = id.startsWith('v') ? id : `v${id}`; const commitSha = (await git.raw(['rev-list', '-n', '1', version])).split('\n')[0]; if (verbose) { - console.log(`🔍 Commit at tag ${chalk.green(version)}: ${chalk.blue(commitSha)}`); + console.log(`🔍 Commit at tag ${picocolors.green(version)}: ${picocolors.blue(commitSha)}`); } return commitSha; }; @@ -50,12 +52,12 @@ export const getFromCommit = async (from?: string | undefined, verbose?: boolean } actualFrom = latest; if (verbose) { - console.log(`🔍 No 'from' specified, found latest tag: ${chalk.blue(latest)}`); + console.log(`🔍 No 'from' specified, found latest tag: ${picocolors.blue(latest)}`); } } const commit = await getCommitAt(actualFrom!, verbose); if (verbose) { - console.log(`🔍 Found 'from' commit: ${chalk.blue(commit)}`); + console.log(`🔍 Found 'from' commit: ${picocolors.blue(commit)}`); } return commit; }; @@ -64,14 +66,14 @@ export const getToCommit = async (to?: string | undefined, verbose?: boolean) => if (!to) { const head = await git.revparse('HEAD'); if (verbose) { - console.log(`🔍 No 'to' specified, HEAD is at commit: ${chalk.blue(head)}`); + console.log(`🔍 No 'to' specified, HEAD is at commit: ${picocolors.blue(head)}`); } return head; } const commit = await getCommitAt(to, verbose); if (verbose) { - console.log(`🔍 Found 'to' commit: ${chalk.blue(commit)}`); + console.log(`🔍 Found 'to' commit: ${picocolors.blue(commit)}`); } return commit; }; @@ -88,9 +90,9 @@ export const getAllCommitsBetween = async ({ const logResult = await git.log({ from, to, '--first-parent': null }); if (verbose) { console.log( - `🔍 Found ${chalk.blue(logResult.total)} commits between ${chalk.green( + `🔍 Found ${picocolors.blue(logResult.total)} commits between ${picocolors.green( `${from}` - )} and ${chalk.green(`${to}`)}:` + )} and ${picocolors.green(`${to}`)}:` ); console.dir(logResult.all, { depth: null, colors: true }); } @@ -110,7 +112,7 @@ export const getRepo = async (verbose?: boolean): Promise => { const pushUrl = originRemote.refs.push; const repo = pushUrl.replace(/\.git$/, '').replace(/.*:(\/\/github\.com\/)*/, ''); if (verbose) { - console.log(`📦 Extracted repo: ${chalk.blue(repo)}`); + console.log(`📦 Extracted repo: ${picocolors.blue(repo)}`); } return repo; }; @@ -234,7 +236,7 @@ export const getChanges = async ({ unpickedPatches?: boolean; verbose?: boolean; }) => { - console.log(`💬 Getting changes for ${chalk.blue(version)}`); + console.log(`💬 Getting changes for ${picocolors.blue(version)}`); let commits; if (unpickedPatches) { diff --git a/scripts/release/version.ts b/scripts/release/version.ts index 422de3501bc0..bdaef52fa18e 100644 --- a/scripts/release/version.ts +++ b/scripts/release/version.ts @@ -1,10 +1,10 @@ import { join } from 'node:path'; import { setOutput } from '@actions/core'; -import chalk from 'chalk'; import { program } from 'commander'; import { execaCommand } from 'execa'; import { readFile, readJson, writeFile, writeJson } from 'fs-extra'; +import picocolors from 'picocolors'; import semver from 'semver'; import { z } from 'zod'; @@ -116,14 +116,14 @@ const getCurrentVersion = async () => { }; const bumpCodeVersion = async (nextVersion: string) => { - console.log(`🤜 Bumping version of ${chalk.cyan('code')}'s package.json...`); + console.log(`🤜 Bumping version of ${picocolors.cyan('code')}'s package.json...`); const codePkgJson = await readJson(CODE_PACKAGE_JSON_PATH); codePkgJson.version = nextVersion; await writeJson(CODE_PACKAGE_JSON_PATH, codePkgJson, { spaces: 2 }); - console.log(`✅ Bumped version of ${chalk.cyan('code')}'s package.json`); + console.log(`✅ Bumped version of ${picocolors.cyan('code')}'s package.json`); }; const bumpVersionSources = async (currentVersion: string, nextVersion: string) => { @@ -131,7 +131,7 @@ const bumpVersionSources = async (currentVersion: string, nextVersion: string) = join(CODE_DIR_PATH, 'core', 'src', 'manager-api', 'version.ts'), join(CODE_DIR_PATH, 'core', 'src', 'common', 'versions.ts'), ]; - console.log(`🤜 Bumping versions in...:\n ${chalk.cyan(filesToUpdate.join('\n '))}`); + console.log(`🤜 Bumping versions in...:\n ${picocolors.cyan(filesToUpdate.join('\n '))}`); await Promise.all( filesToUpdate.map(async (filename) => { @@ -141,7 +141,7 @@ const bumpVersionSources = async (currentVersion: string, nextVersion: string) = }) ); - console.log(`✅ Bumped versions in:\n ${chalk.cyan(filesToUpdate.join('\n '))}`); + console.log(`✅ Bumped versions in:\n ${picocolors.cyan(filesToUpdate.join('\n '))}`); }; const bumpAllPackageJsons = async ({ @@ -154,7 +154,7 @@ const bumpAllPackageJsons = async ({ verbose?: boolean; }) => { console.log( - `🤜 Bumping versions and dependencies in ${chalk.cyan( + `🤜 Bumping versions and dependencies in ${picocolors.cyan( `all ${packages.length} package.json` )}'s...` ); @@ -171,7 +171,7 @@ const bumpAllPackageJsons = async ({ packageJson.version = nextVersion; if (verbose) { console.log( - ` Bumping ${chalk.blue(pkg.name)}'s version to ${chalk.yellow(nextVersion)}` + ` Bumping ${picocolors.blue(pkg.name)}'s version to ${picocolors.yellow(nextVersion)}` ); } await writeJson(packageJsonPath, packageJson, { spaces: 2 }); @@ -181,15 +181,15 @@ const bumpAllPackageJsons = async ({ const bumpDeferred = async (nextVersion: string) => { console.log( - `⏳ Setting a ${chalk.cyan('deferred')} version bump with ${chalk.blue( + `⏳ Setting a ${picocolors.cyan('deferred')} version bump with ${picocolors.blue( 'code/package.json#deferredNextVersion' - )} = ${chalk.yellow(nextVersion)}...` + )} = ${picocolors.yellow(nextVersion)}...` ); const codePkgJson = await readJson(CODE_PACKAGE_JSON_PATH); if (codePkgJson.deferredNextVersion) { console.warn( - `❗ A "deferredNextVersion" property already exists with the value of ${chalk.cyan( + `❗ A "deferredNextVersion" property already exists with the value of ${picocolors.cyan( codePkgJson.deferredNextVersion )}. This will be overwritten and ignored.` ); @@ -198,12 +198,12 @@ const bumpDeferred = async (nextVersion: string) => { codePkgJson.deferredNextVersion = nextVersion; await writeJson(CODE_PACKAGE_JSON_PATH, codePkgJson, { spaces: 2 }); - console.log(`✅ Set a ${chalk.cyan('deferred')} version bump. Not bumping any packages.`); + console.log(`✅ Set a ${picocolors.cyan('deferred')} version bump. Not bumping any packages.`); }; const applyDeferredVersionBump = async () => { console.log( - `⏩ Applying previously deferred version bump set at ${chalk.blue( + `⏩ Applying previously deferred version bump set at ${picocolors.blue( 'code/package.json#deferredNextVersion' )}...` ); @@ -221,9 +221,9 @@ const applyDeferredVersionBump = async () => { await writeJson(CODE_PACKAGE_JSON_PATH, codePkgJson, { spaces: 2 }); console.log( - `✅ Extracted and removed deferred version ${chalk.green( + `✅ Extracted and removed deferred version ${picocolors.green( deferredNextVersion - )} from ${chalk.blue('code/package.json#deferredNextVersion')}` + )} from ${picocolors.blue('code/package.json#deferredNextVersion')}` ); return deferredNextVersion; @@ -240,11 +240,11 @@ export const run = async (options: unknown) => { const [packages, currentVersion] = await Promise.all([getWorkspaces(), getCurrentVersion()]); console.log( - `📦 found ${packages.length} storybook packages at version ${chalk.red(currentVersion)}` + `📦 found ${packages.length} storybook packages at version ${picocolors.red(currentVersion)}` ); if (verbose) { const formattedPackages = packages.map( - (pkg) => `${chalk.green(pkg.name.padEnd(60))}: ${chalk.cyan(pkg.location)}` + (pkg) => `${picocolors.green(pkg.name.padEnd(60))}: ${picocolors.cyan(pkg.location)}` ); console.log(`📦 Packages: ${formattedPackages.join('\n ')}`); @@ -255,42 +255,46 @@ export const run = async (options: unknown) => { if ('apply' in options && options.apply) { nextVersion = await applyDeferredVersionBump(); } else if ('exact' in options && options.exact) { - console.log(`📈 Exact version selected: ${chalk.green(options.exact)}`); + console.log(`📈 Exact version selected: ${picocolors.green(options.exact)}`); nextVersion = options.exact; } else { const { releaseType, preId } = options as BumpOptions; - console.log(`📈 Release type selected: ${chalk.green(releaseType)}`); + console.log(`📈 Release type selected: ${picocolors.green(releaseType)}`); if (preId) { - console.log(`🆔 Version prerelease identifier selected: ${chalk.yellow(preId)}`); + console.log(`🆔 Version prerelease identifier selected: ${picocolors.yellow(preId)}`); } nextVersion = semver.inc(currentVersion, releaseType, preId); console.log( - `⏭ Bumping version ${chalk.blue(currentVersion)} with release type ${chalk.green( + `⏭ Bumping version ${picocolors.blue(currentVersion)} with release type ${picocolors.green( releaseType )}${ - preId ? ` and ${chalk.yellow(preId)}` : '' - } results in version: ${chalk.bgGreenBright.bold(nextVersion)}` + preId ? ` and ${picocolors.yellow(preId)}` : '' + } results in version: ${picocolors.bold(picocolors.greenBright(nextVersion))}` ); } if ('deferred' in options && options.deferred) { await bumpDeferred(nextVersion); } else { - console.log(`⏭ Bumping all packages to ${chalk.blue(nextVersion)}...`); + console.log(`⏭ Bumping all packages to ${picocolors.blue(nextVersion)}...`); await bumpCodeVersion(nextVersion); await bumpVersionSources(currentVersion, nextVersion); await bumpAllPackageJsons({ packages, nextVersion, verbose }); - console.log(`⬆️ Updating lock file with ${chalk.blue('yarn install --mode=update-lockfile')}`); + console.log( + `⬆️ Updating lock file with ${picocolors.blue('yarn install --mode=update-lockfile')}` + ); await execaCommand(`yarn install --mode=update-lockfile`, { cwd: join(CODE_DIR_PATH), stdio: verbose ? 'inherit' : undefined, cleanup: true, }); - console.log(`✅ Updated lock file with ${chalk.blue('yarn install --mode=update-lockfile')}`); + console.log( + `✅ Updated lock file with ${picocolors.blue('yarn install --mode=update-lockfile')}` + ); } if (process.env.GITHUB_ACTIONS === 'true') { diff --git a/scripts/release/write-changelog.ts b/scripts/release/write-changelog.ts index 8f927b3c6434..59e0d3273958 100644 --- a/scripts/release/write-changelog.ts +++ b/scripts/release/write-changelog.ts @@ -1,8 +1,8 @@ import { join } from 'node:path'; -import chalk from 'chalk'; import { program } from 'commander'; import { readFile, writeFile, writeJson } from 'fs-extra'; +import picocolors from 'picocolors'; import semver from 'semver'; import { z } from 'zod'; @@ -47,7 +47,7 @@ const validateOptions = (args: unknown[], options: { [key: string]: any }): opti optionsSchema.parse(options); if (args.length !== 1 || !semver.valid(args[0] as string)) { console.error( - `🚨 Invalid arguments, expected a single argument with the version to generate changelog for, eg. ${chalk.green( + `🚨 Invalid arguments, expected a single argument with the version to generate changelog for, eg. ${picocolors.green( '7.1.0-beta.8' )}` ); @@ -70,7 +70,7 @@ const writeToChangelogFile = async ({ const changelogPath = join(__dirname, '..', '..', changelogFilename); if (verbose) { - console.log(`📝 Writing changelog to ${chalk.blue(changelogPath)}`); + console.log(`📝 Writing changelog to ${picocolors.blue(changelogPath)}`); } const currentChangelog = await readFile(changelogPath, 'utf-8'); @@ -93,7 +93,7 @@ const writeToDocsVersionFile = async ({ const filepath = join(__dirname, '..', '..', 'docs', 'versions', filename); if (verbose) { - console.log(`📝 Writing changelog to ${chalk.blue(filepath)}`); + console.log(`📝 Writing changelog to ${picocolors.blue(filepath)}`); } const textWithoutHeading = changelogText.split('\n').slice(2).join('\n').replaceAll('"', '\\"'); @@ -116,9 +116,9 @@ export const run = async (args: unknown[], options: unknown) => { const version = args[0] as string; console.log( - `💬 Generating changelog for ${chalk.blue(version)} between ${chalk.green( + `💬 Generating changelog for ${picocolors.blue(version)} between ${picocolors.green( from || 'latest' - )} and ${chalk.green(to || 'HEAD')}` + )} and ${picocolors.green(to || 'HEAD')}` ); const { changelogText } = await getChanges({ version, from, to, unpickedPatches, verbose }); diff --git a/scripts/run-registry.ts b/scripts/run-registry.ts index 4f837b952794..825788b24f51 100755 --- a/scripts/run-registry.ts +++ b/scripts/run-registry.ts @@ -4,11 +4,11 @@ import http from 'node:http'; import type { Server } from 'node:http'; import { join, resolve as resolvePath } from 'node:path'; -import chalk from 'chalk'; import { program } from 'commander'; import { execa, execaSync } from 'execa'; import { pathExists, readJSON, remove } from 'fs-extra'; import pLimit from 'p-limit'; +import picocolors from 'picocolors'; import { parseConfigFile, runServer } from 'verdaccio'; import { maxConcurrentTasks } from './utils/concurrency'; @@ -197,7 +197,9 @@ const run = async () => { } ); - logger.log(`📦 found ${packages.length} storybook packages at version ${chalk.blue(version)}`); + logger.log( + `📦 found ${packages.length} storybook packages at version ${picocolors.blue(version)}` + ); if (opts.publish) { await publish(packages, 'http://localhost:6002'); diff --git a/scripts/utils/exec.ts b/scripts/utils/exec.ts index 2998e4877acb..c12c9eea2f9f 100644 --- a/scripts/utils/exec.ts +++ b/scripts/utils/exec.ts @@ -1,6 +1,6 @@ -import chalk from 'chalk'; import type { ExecaChildProcess, Options } from 'execa'; import { execa } from 'execa'; +import picocolors from 'picocolors'; const logger = console; @@ -50,7 +50,7 @@ export const exec = async ( } } catch (err) { if (!(typeof err === 'object' && 'killed' in err && err.killed)) { - logger.error(chalk.red(`An error occurred while executing: \`${command}\``)); + logger.error(picocolors.red(`An error occurred while executing: \`${command}\``)); logger.log(`${errorMessage}\n`); } diff --git a/scripts/utils/options.ts b/scripts/utils/options.ts index 6bf48e804744..f3caf64e28b2 100644 --- a/scripts/utils/options.ts +++ b/scripts/utils/options.ts @@ -1,8 +1,7 @@ /** Use commander and prompts to gather a list of options for a script */ -import chalk from 'chalk'; import { type Command, type Option as CommanderOption, program } from 'commander'; -// eslint-disable-next-line import/extensions import { kebabCase } from 'es-toolkit/compat'; +import picocolors from 'picocolors'; import prompts from 'prompts'; import type { Falsy, PrevCaller, PromptObject, PromptType } from 'prompts'; import { dedent } from 'ts-dedent'; @@ -131,9 +130,9 @@ export function getOptions( const checkStringValue = (raw: string) => { if (option.values && !option.values.includes(raw)) { - const possibleOptions = chalk.cyan(option.values.join('\n')); + const possibleOptions = picocolors.cyan(option.values.join('\n')); throw new Error( - dedent`Unexpected value '${chalk.yellow(raw)}' for option '${chalk.magenta(key)}'. + dedent`Unexpected value '${picocolors.yellow(raw)}' for option '${picocolors.magenta(key)}'. These are the possible options: ${possibleOptions}\n\n` diff --git a/scripts/yarn.lock b/scripts/yarn.lock index 68267cf11fe1..8668a1a7ac3e 100644 --- a/scripts/yarn.lock +++ b/scripts/yarn.lock @@ -1560,7 +1560,6 @@ __metadata: "@vitest/coverage-v8": "npm:^2.0.5" ansi-regex: "npm:^6.0.1" browser-assert: "npm:^1.2.1" - chalk: "npm:^4.1.0" chromatic: "npm:^11.5.5" codecov: "npm:^3.8.1" commander: "npm:^12.1.0" @@ -1603,11 +1602,13 @@ __metadata: knip: "npm:^5.30.1" lint-staged: "npm:^15.2.7" memoizerific: "npm:^1.11.3" + minimatch: "npm:^10.0.1" node-gyp: "npm:^9.3.1" nx: "npm:18.0.6" ora: "npm:^5.4.1" p-limit: "npm:^3.1.0" p-retry: "npm:^5.1.2" + picocolors: "npm:^1.1.0" playwright: "npm:1.46.0" playwright-core: "npm:1.46.0" prettier: "npm:^3.3.2" @@ -9666,6 +9667,15 @@ __metadata: languageName: node linkType: hard +"minimatch@npm:^10.0.1": + version: 10.0.1 + resolution: "minimatch@npm:10.0.1" + dependencies: + brace-expansion: "npm:^2.0.1" + checksum: 10c0/e6c29a81fe83e1877ad51348306be2e8aeca18c88fdee7a99df44322314279e15799e41d7cb274e4e8bb0b451a3bc622d6182e157dfa1717d6cda75e9cd8cd5d + languageName: node + linkType: hard + "minimatch@npm:^5.0.1": version: 5.1.6 resolution: "minimatch@npm:5.1.6" @@ -10752,10 +10762,10 @@ __metadata: languageName: node linkType: hard -"picocolors@npm:^1.0.0": - version: 1.0.0 - resolution: "picocolors@npm:1.0.0" - checksum: 10c0/20a5b249e331c14479d94ec6817a182fd7a5680debae82705747b2db7ec50009a5f6648d0621c561b0572703f84dbef0858abcbd5856d3c5511426afcb1961f7 +"picocolors@npm:^1.0.0, picocolors@npm:^1.1.0": + version: 1.1.0 + resolution: "picocolors@npm:1.1.0" + checksum: 10c0/86946f6032148801ef09c051c6fb13b5cf942eaf147e30ea79edb91dd32d700934edebe782a1078ff859fb2b816792e97ef4dab03d7f0b804f6b01a0df35e023 languageName: node linkType: hard