From 8de69e29b8eb839952860f6ec195f88ccc6e4da7 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 19 Jan 2024 22:49:00 +0800 Subject: [PATCH] More cleanup --- .../src/automigrate/helpers/eslintPlugin.ts | 6 +- .../helpers/getMigrationSummary.test.ts | 2 +- .../helpers/getMigrationSummary.ts | 2 +- .../src/automigrate/helpers/mainConfigFile.ts | 3 +- code/lib/cli/src/detect.ts | 4 +- .../src/doctor/getDuplicatedDepsWarnings.ts | 2 +- code/lib/cli/src/generators/ANGULAR/index.ts | 3 +- code/lib/cli/src/generators/types.ts | 2 +- code/lib/cli/src/helpers.ts | 64 +----------------- code/lib/cli/src/initiate.ts | 14 ++-- code/lib/cli/src/upgrade.ts | 10 ++- code/lib/core-common/src/index.ts | 2 + .../js-package-manager/JsPackageManager.ts | 4 +- .../src/utils}/HandledError.ts | 0 code/lib/core-common/src/utils/log.ts | 65 +++++++++++++++++++ scripts/sandbox/generate.ts | 6 +- 16 files changed, 102 insertions(+), 87 deletions(-) rename code/lib/{cli/src => core-common/src/utils}/HandledError.ts (100%) create mode 100644 code/lib/core-common/src/utils/log.ts diff --git a/code/lib/cli/src/automigrate/helpers/eslintPlugin.ts b/code/lib/cli/src/automigrate/helpers/eslintPlugin.ts index 16dbb665c946..3090de3ef89c 100644 --- a/code/lib/cli/src/automigrate/helpers/eslintPlugin.ts +++ b/code/lib/cli/src/automigrate/helpers/eslintPlugin.ts @@ -1,12 +1,12 @@ import fse, { readFile, readJson, writeJson } from 'fs-extra'; - import { dedent } from 'ts-dedent'; import detectIndent from 'detect-indent'; -import { readConfig, writeConfig } from '@storybook/csf-tools'; import prompts from 'prompts'; import chalk from 'chalk'; + +import { readConfig, writeConfig } from '@storybook/csf-tools'; import type { JsPackageManager } from '@storybook/core-common'; -import { paddedLog } from '../../helpers'; +import { paddedLog } from '@storybook/core-common'; export const SUPPORTED_ESLINT_EXTENSIONS = ['js', 'cjs', 'json']; const UNSUPPORTED_ESLINT_EXTENSIONS = ['yaml', 'yml']; diff --git a/code/lib/cli/src/automigrate/helpers/getMigrationSummary.test.ts b/code/lib/cli/src/automigrate/helpers/getMigrationSummary.test.ts index 27f2a2a5326b..85de99111c87 100644 --- a/code/lib/cli/src/automigrate/helpers/getMigrationSummary.test.ts +++ b/code/lib/cli/src/automigrate/helpers/getMigrationSummary.test.ts @@ -1,7 +1,7 @@ import { describe, expect, vi, it } from 'vitest'; import { getMigrationSummary } from './getMigrationSummary'; import { FixStatus } from '../types'; -import type { InstallationMetadata } from '../../js-package-manager/types'; +import type { InstallationMetadata } from '@storybook/core-common'; vi.mock('boxen', () => ({ default: vi.fn((str, { title = '' }) => `${title}\n\n${str.replace(/\x1b\[[0-9;]*[mG]/g, '')}`), diff --git a/code/lib/cli/src/automigrate/helpers/getMigrationSummary.ts b/code/lib/cli/src/automigrate/helpers/getMigrationSummary.ts index 12b576ee12f7..1dcd0a0658c7 100644 --- a/code/lib/cli/src/automigrate/helpers/getMigrationSummary.ts +++ b/code/lib/cli/src/automigrate/helpers/getMigrationSummary.ts @@ -1,9 +1,9 @@ import chalk from 'chalk'; import boxen from 'boxen'; import dedent from 'ts-dedent'; +import type { InstallationMetadata } from '@storybook/core-common'; import type { FixSummary } from '../types'; import { FixStatus } from '../types'; -import type { InstallationMetadata } from '../../js-package-manager/types'; import { getDuplicatedDepsWarnings } from '../../doctor/getDuplicatedDepsWarnings'; export const messageDivider = '\n\n'; diff --git a/code/lib/cli/src/automigrate/helpers/mainConfigFile.ts b/code/lib/cli/src/automigrate/helpers/mainConfigFile.ts index 87c86b471781..c816ee90c5ec 100644 --- a/code/lib/cli/src/automigrate/helpers/mainConfigFile.ts +++ b/code/lib/cli/src/automigrate/helpers/mainConfigFile.ts @@ -11,7 +11,8 @@ import { readConfig, writeConfig as writeConfigFile } from '@storybook/csf-tools import chalk from 'chalk'; import dedent from 'ts-dedent'; import path from 'path'; -import type { getStorybookVersion, JsPackageManager } from '@storybook/core-common'; +import type { JsPackageManager } from '@storybook/core-common'; +import { getStorybookVersion } from '@storybook/core-common'; const logger = console; diff --git a/code/lib/cli/src/detect.ts b/code/lib/cli/src/detect.ts index 1470e16b7146..16c592236909 100644 --- a/code/lib/cli/src/detect.ts +++ b/code/lib/cli/src/detect.ts @@ -13,9 +13,9 @@ import { unsupportedTemplate, CoreBuilder, } from './project_types'; -import { commandLog, isNxProject } from './helpers'; +import { isNxProject } from './helpers'; import type { JsPackageManager, PackageJsonWithMaybeDeps } from '@storybook/core-common'; -import { HandledError } from './HandledError'; +import { commandLog, HandledError } from '@storybook/core-common'; const viteConfigFiles = ['vite.config.ts', 'vite.config.js', 'vite.config.mjs']; const webpackConfigFiles = ['webpack.config.js']; diff --git a/code/lib/cli/src/doctor/getDuplicatedDepsWarnings.ts b/code/lib/cli/src/doctor/getDuplicatedDepsWarnings.ts index 3c72d6c21bc0..d76c01d9ee97 100644 --- a/code/lib/cli/src/doctor/getDuplicatedDepsWarnings.ts +++ b/code/lib/cli/src/doctor/getDuplicatedDepsWarnings.ts @@ -1,7 +1,7 @@ import chalk from 'chalk'; import { frameworkPackages, rendererPackages } from '@storybook/core-common'; +import type { InstallationMetadata } from '@storybook/core-common'; import { hasMultipleVersions } from './hasMultipleVersions'; -import type { InstallationMetadata } from '../js-package-manager/types'; export const messageDivider = '\n\n'; diff --git a/code/lib/cli/src/generators/ANGULAR/index.ts b/code/lib/cli/src/generators/ANGULAR/index.ts index 27b10dfcc2ca..cedc43def3b4 100644 --- a/code/lib/cli/src/generators/ANGULAR/index.ts +++ b/code/lib/cli/src/generators/ANGULAR/index.ts @@ -1,10 +1,11 @@ import { join } from 'path'; +import { paddedLog } from '@storybook/core-common'; import { baseGenerator } from '../baseGenerator'; import type { Generator } from '../types'; import { CoreBuilder } from '../../project_types'; import { AngularJSON, compoDocPreviewPrefix, promptForCompoDocs } from './helpers'; import { getCliDir } from '../../dirs'; -import { paddedLog, copyTemplate } from '../../helpers'; +import { copyTemplate } from '../../helpers'; const generator: Generator<{ projectName: string }> = async ( packageManager, diff --git a/code/lib/cli/src/generators/types.ts b/code/lib/cli/src/generators/types.ts index c2da3c3b32e8..763df2c4d1a6 100644 --- a/code/lib/cli/src/generators/types.ts +++ b/code/lib/cli/src/generators/types.ts @@ -1,6 +1,6 @@ import type { NpmOptions } from '../NpmOptions'; import type { SupportedLanguage, Builder, ProjectType } from '../project_types'; -import type { JsPackageManager, PackageManagerName } from '../js-package-manager/JsPackageManager'; +import type { JsPackageManager, PackageManagerName } from '@storybook/core-common'; import type { FrameworkPreviewParts } from './configure'; export type GeneratorOptions = { diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts index cc67fbac896f..95c22ee624f1 100644 --- a/code/lib/cli/src/helpers.ts +++ b/code/lib/cli/src/helpers.ts @@ -15,7 +15,7 @@ import type { } from '@storybook/core-common'; import type { SupportedFrameworks, SupportedRenderers } from './project_types'; import { SupportedLanguage } from './project_types'; -import {versions as storybookMonorepoPackages} from '@storybook/core-common'; +import { versions as storybookMonorepoPackages } from '@storybook/core-common'; const logger = console; @@ -46,68 +46,6 @@ export const writeFileAsJson = (jsonPath: string, content: unknown) => { return true; }; -export const commandLog = (message: string) => { - process.stdout.write(chalk.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)}`); - - if (!errorInfo) { - return; - } - - const newErrorInfo = errorInfo - .split('\n') - .map((line) => ` ${chalk.dim(line)}`) - .join('\n'); - logger.error(`${newErrorInfo}\n`); - return; - } - - process.stdout.write(`. ${chalk.green('✓')}\n`); - }; -}; - -export function paddedLog(message: string) { - const newMessage = message - .split('\n') - .map((line) => ` ${line}`) - .join('\n'); - - logger.log(newMessage); -} - -export function getChars(char: string, amount: number) { - let line = ''; - for (let lc = 0; lc < amount; lc += 1) { - line += char; - } - - return line; -} - -export function codeLog(codeLines: string[], leftPadAmount?: number) { - let maxLength = 0; - const newLines = codeLines.map((line) => { - maxLength = line.length > maxLength ? line.length : maxLength; - return line; - }); - - const finalResult = newLines - .map((line) => { - const rightPadAmount = maxLength - line.length; - let newLine = line + getChars(' ', rightPadAmount); - newLine = getChars(' ', leftPadAmount || 2) + chalk.inverse(` ${newLine} `); - return newLine; - }) - .join('\n'); - - logger.log(finalResult); -} - /** * Detect if any babel dependencies need to be added to the project * This is currently used by react-native generator diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts index e9c2a2befb2e..54321ccb96a9 100644 --- a/code/lib/cli/src/initiate.ts +++ b/code/lib/cli/src/initiate.ts @@ -4,6 +4,15 @@ import prompts from 'prompts'; import { telemetry } from '@storybook/telemetry'; import { withTelemetry } from '@storybook/core-server'; import { NxProjectDetectedError } from '@storybook/core-events/server-errors'; +import { + versions, + HandledError, + JsPackageManagerFactory, + commandLog, + codeLog, + paddedLog, +} from '@storybook/core-common'; +import type { JsPackageManager } from '@storybook/core-common'; import dedent from 'ts-dedent'; import boxen from 'boxen'; @@ -11,7 +20,6 @@ import { lt, prerelease } from 'semver'; import type { Builder } from './project_types'; import { installableProjectTypes, ProjectType } from './project_types'; import { detect, isStorybookInstantiated, detectLanguage, detectPnp } from './detect'; -import { commandLog, codeLog, paddedLog } from './helpers'; import angularGenerator from './generators/ANGULAR'; import emberGenerator from './generators/EMBER'; import reactGenerator from './generators/REACT'; @@ -28,13 +36,9 @@ import qwikGenerator from './generators/QWIK'; import svelteKitGenerator from './generators/SVELTEKIT'; import solidGenerator from './generators/SOLID'; import serverGenerator from './generators/SERVER'; -import type { JsPackageManager } from '@storybook/core-common'; -import { JsPackageManagerFactory } from '@storybook/core-common'; import type { NpmOptions } from './NpmOptions'; import type { CommandOptions, GeneratorOptions } from './generators/types'; -import { HandledError } from './HandledError'; import { currentDirectoryIsEmpty, scaffoldNewProject } from './scaffold-new-project'; -import { versions } from '@storybook/core-common'; const logger = console; diff --git a/code/lib/cli/src/upgrade.ts b/code/lib/cli/src/upgrade.ts index 09015d990395..14135e44b2e7 100644 --- a/code/lib/cli/src/upgrade.ts +++ b/code/lib/cli/src/upgrade.ts @@ -12,10 +12,14 @@ import chalk from 'chalk'; import dedent from 'ts-dedent'; import boxen from 'boxen'; import type { PackageManagerName } from '@storybook/core-common'; -import { JsPackageManagerFactory } from '@storybook/core-common'; -import { coerceSemver, commandLog } from './helpers'; +import { + JsPackageManagerFactory, + isCorePackage, + versions, + commandLog, +} from '@storybook/core-common'; +import { coerceSemver } from './helpers'; import { automigrate } from './automigrate'; -import { isCorePackage, versions } from '@storybook/core-common'; type Package = { package: string; diff --git a/code/lib/core-common/src/index.ts b/code/lib/core-common/src/index.ts index b827aae44d81..e8f02195ba9d 100644 --- a/code/lib/core-common/src/index.ts +++ b/code/lib/core-common/src/index.ts @@ -14,6 +14,7 @@ export * from './utils/get-storybook-configuration'; export * from './utils/get-storybook-info'; export * from './utils/get-storybook-refs'; export * from './utils/glob-to-regexp'; +export * from './utils/HandledError'; export * from './utils/handlebars'; export * from './utils/interpolate'; export * from './utils/interpret-files'; @@ -22,6 +23,7 @@ export * from './utils/load-custom-presets'; export * from './utils/load-main-config'; export * from './utils/load-manager-or-addons-file'; export * from './utils/load-preview-or-config-file'; +export * from './utils/log'; export * from './utils/log-config'; export * from './utils/normalize-stories'; export * from './utils/paths'; diff --git a/code/lib/core-common/src/js-package-manager/JsPackageManager.ts b/code/lib/core-common/src/js-package-manager/JsPackageManager.ts index ce3ea24c88f8..79dfe4a5fb29 100644 --- a/code/lib/core-common/src/js-package-manager/JsPackageManager.ts +++ b/code/lib/core-common/src/js-package-manager/JsPackageManager.ts @@ -8,11 +8,11 @@ import fs from 'fs'; import dedent from 'ts-dedent'; import { readFile, writeFile, readFileSync } from 'fs-extra'; import invariant from 'tiny-invariant'; -import { commandLog } from '../../../cli/src/helpers'; +import { commandLog } from '../utils/log'; import type { PackageJson, PackageJsonWithDepsAndDevDeps } from './PackageJson'; import storybookPackagesVersions from '../versions'; import type { InstallationMetadata } from './types'; -import { HandledError } from '../../../cli/src/HandledError'; +import { HandledError } from '../utils/HandledError'; const logger = console; diff --git a/code/lib/cli/src/HandledError.ts b/code/lib/core-common/src/utils/HandledError.ts similarity index 100% rename from code/lib/cli/src/HandledError.ts rename to code/lib/core-common/src/utils/HandledError.ts diff --git a/code/lib/core-common/src/utils/log.ts b/code/lib/core-common/src/utils/log.ts new file mode 100644 index 000000000000..43119e616b24 --- /dev/null +++ b/code/lib/core-common/src/utils/log.ts @@ -0,0 +1,65 @@ +import chalk from 'chalk'; + +const logger = console; + +export const commandLog = (message: string) => { + process.stdout.write(chalk.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)}`); + + if (!errorInfo) { + return; + } + + const newErrorInfo = errorInfo + .split('\n') + .map((line) => ` ${chalk.dim(line)}`) + .join('\n'); + logger.error(`${newErrorInfo}\n`); + return; + } + + process.stdout.write(`. ${chalk.green('✓')}\n`); + }; +}; + +export function paddedLog(message: string) { + const newMessage = message + .split('\n') + .map((line) => ` ${line}`) + .join('\n'); + + logger.log(newMessage); +} + +export function getChars(char: string, amount: number) { + let line = ''; + for (let lc = 0; lc < amount; lc += 1) { + line += char; + } + + return line; +} + +export function codeLog(codeLines: string[], leftPadAmount?: number) { + let maxLength = 0; + const newLines = codeLines.map((line) => { + maxLength = line.length > maxLength ? line.length : maxLength; + return line; + }); + + const finalResult = newLines + .map((line) => { + const rightPadAmount = maxLength - line.length; + let newLine = line + getChars(' ', rightPadAmount); + newLine = getChars(' ', leftPadAmount || 2) + chalk.inverse(` ${newLine} `); + return newLine; + }) + .join('\n'); + + logger.log(finalResult); +} diff --git a/scripts/sandbox/generate.ts b/scripts/sandbox/generate.ts index f6260ada4875..27f17f8c7ad0 100755 --- a/scripts/sandbox/generate.ts +++ b/scripts/sandbox/generate.ts @@ -12,14 +12,14 @@ import { esMain } from '../utils/esmain'; import type { OptionValues } from '../utils/options'; import { createOptions } from '../utils/options'; import { allTemplates as sandboxTemplates } from '../../code/lib/cli/src/sandbox-templates'; -import storybookVersions from '../../code/lib/cli/src/versions'; -import { JsPackageManagerFactory } from '../../code/lib/cli/src/js-package-manager/JsPackageManagerFactory'; +import storybookVersions from '../../code/lib/core-common/src/versions'; +import { JsPackageManagerFactory } from '../../code/lib/core-common/src/js-package-manager/JsPackageManagerFactory'; // eslint-disable-next-line import/no-cycle import { localizeYarnConfigFiles, setupYarn } from './utils/yarn'; import type { GeneratorConfig } from './utils/types'; import { getStackblitzUrl, renderTemplate } from './utils/template'; -import type { JsPackageManager } from '../../code/lib/cli/src/js-package-manager'; +import type { JsPackageManager } from '../../code/lib/core-common/src/js-package-manager'; import { BEFORE_DIR_NAME, AFTER_DIR_NAME,