Skip to content

Commit

Permalink
Merge branch 'next' into norbert/esbuild-version-sync
Browse files Browse the repository at this point in the history
  • Loading branch information
ndelangen authored Oct 1, 2024
2 parents c40aba2 + 70d8f4d commit 27a5dec
Show file tree
Hide file tree
Showing 101 changed files with 608 additions and 547 deletions.
1 change: 1 addition & 0 deletions code/addons/test/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
15 changes: 8 additions & 7 deletions code/addons/test/src/postinstall.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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...
`
Expand Down Expand Up @@ -78,22 +79,22 @@ 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.
`);
}

if (info.frameworkPackageName === '@storybook/nextjs') {
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.
`);
}
Expand All @@ -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.
`
);
Expand Down Expand Up @@ -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`}
`
Expand Down Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion code/core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions code/core/scripts/helpers/generateTypesFiles.ts
Original file line number Diff line number Diff line change
@@ -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(
Expand Down Expand Up @@ -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])));
}
});
})
Expand Down
15 changes: 9 additions & 6 deletions code/core/scripts/prep.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions code/core/src/cli/bin/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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.
Expand Down
4 changes: 2 additions & 2 deletions code/core/src/cli/eslintPlugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -108,7 +108,7 @@ export const suggestESLintPlugin = async (): Promise<boolean> => {
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'
)}
Expand Down
4 changes: 2 additions & 2 deletions code/core/src/cli/helpers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
}
}
Expand Down
6 changes: 3 additions & 3 deletions code/core/src/common/js-package-manager/JsPackageManager.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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);
}

Expand Down
4 changes: 2 additions & 2 deletions code/core/src/common/utils/log-config.ts
Original file line number Diff line number Diff line change
@@ -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 });
}
14 changes: 7 additions & 7 deletions code/core/src/common/utils/log.ts
Original file line number Diff line number Diff line change
@@ -1,29 +1,29 @@
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<void>
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;
}

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`);
};
};

Expand Down Expand Up @@ -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');
Expand Down
8 changes: 4 additions & 4 deletions code/core/src/common/utils/notify-telemetry.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import chalk from 'chalk';
import picocolors from 'picocolors';

import { cache } from './cache';

Expand All @@ -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();
};
6 changes: 4 additions & 2 deletions code/core/src/core-server/build-static.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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!");
}
Expand Down
6 changes: 3 additions & 3 deletions code/core/src/core-server/utils/StoryIndexGenerator.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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)
)}`
);
Expand Down Expand Up @@ -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'
)}`
);
Expand Down
Loading

0 comments on commit 27a5dec

Please sign in to comment.