CLI: Typescript strict mode

code/lib/cli/package.json

@@ -93,6 +93,7 @@
     "simple-update-notifier": "^2.0.0",
     "strip-json-comments": "^3.0.1",
     "tempy": "^1.0.1",
+    "tiny-invariant": "^1.3.1",
     "ts-dedent": "^2.0.0",
     "util-deprecate": "^1.0.2"
   },

code/lib/cli/src/HandledError.ts

@@ -1,9 +1,9 @@
 export class HandledError extends Error {
   public handled = true;
 
-  constructor(messageOrError: string | Error) {
-    super(typeof messageOrError === 'string' ? messageOrError : messageOrError.message);
+  constructor(error: unknown) {
+    super(String(error));
 
-    if (typeof messageOrError !== 'string') this.cause = messageOrError;
+    if (typeof error !== 'string') this.cause = error;
   }
 }

code/lib/cli/src/add.ts

@@ -37,7 +37,10 @@ const postinstallAddon = async (addonName: string, options: PostinstallOptions)
 
 const getVersionSpecifier = (addon: string) => {
   const groups = /^(...*)@(.*)$/.exec(addon);
-  return groups ? [groups[1], groups[2]] : [addon, undefined];
+  if (groups) {
+    return [groups[0], groups[2]] as const;
+  }
+  return [addon, undefined] as const;
 };
 
 const requireMain = (configDir: string) => {
@@ -79,6 +82,12 @@ export async function add(
   const packageJson = await packageManager.retrievePackageJson();
   const { mainConfig, configDir } = getStorybookInfo(packageJson);
 
+  if (typeof configDir === 'undefined') {
+    throw new Error(dedent`
+      Unable to find storybook config directory
+    `);
+  }
+
   if (checkInstalled(addon, requireMain(configDir))) {
     throw new Error(dedent`
       Addon ${addon} is already installed; we skipped adding it to your ${mainConfig}.

code/lib/cli/src/automigrate/fixes/angular-builders-multiproject.test.ts

@@ -29,6 +29,7 @@ jest.mock('../../generators/ANGULAR/helpers', () => ({
 }));
 
 describe('is Nx project', () => {
+  // @ts-expect-error (Type 'null' is not comparable)
   const packageManager = {
     getPackageVersion: () => {
       return null;

code/lib/cli/src/automigrate/fixes/autodocs-true.ts

@@ -1,15 +1,13 @@
 import chalk from 'chalk';
 import { dedent } from 'ts-dedent';
 
-import type { StorybookConfigRaw } from '@storybook/types';
-
 import type { Fix } from '../types';
 import { updateMainConfig } from '../helpers/mainConfigFile';
 
 const logger = console;
 
 interface AutodocsTrueFrameworkRunOptions {
-  value?: StorybookConfigRaw['docs']['autodocs'];
+  value?: boolean | 'tag';
 }
 
 /**
@@ -83,7 +81,7 @@ export const autodocsTrue: Fix<AutodocsTrueFrameworkRunOptions> = {
   async run({ result: { value }, dryRun, mainConfigPath }) {
     logger.info(`✅ Setting 'docs.autodocs' to true in main.js`);
     if (!dryRun) {
-      await updateMainConfig({ mainConfigPath, dryRun }, async (main) => {
+      await updateMainConfig({ mainConfigPath, dryRun: !!dryRun }, async (main) => {
         main.removeField(['docs', 'docsPage']);
         main.setFieldValue(['docs', 'autodocs'], value ?? true);
       });

code/lib/cli/src/automigrate/fixes/bare-mdx-stories-glob.ts

@@ -116,7 +116,7 @@ export const bareMdxStoriesGlob: Fix<BareMdxStoriesGlobRunOptions> = {
       ${JSON.stringify(nextStoriesEntries, null, 2)}`);
 
     if (!dryRun) {
-      await updateMainConfig({ mainConfigPath, dryRun }, async (main) => {
+      await updateMainConfig({ mainConfigPath, dryRun: !!dryRun }, async (main) => {
         main.setFieldValue(['stories'], nextStoriesEntries);
       });
     }

code/lib/cli/src/automigrate/fixes/builder-vite.ts

@@ -75,7 +75,7 @@ export const builderVite: Fix<BuilderViteOptions> = {
 
     logger.info(`✅ Updating main.js to use vite builder`);
     if (!dryRun) {
-      await updateMainConfig({ dryRun, mainConfigPath }, async (main) => {
+      await updateMainConfig({ dryRun: !!dryRun, mainConfigPath }, async (main) => {
         const updatedBuilder =
           typeof builder === 'string'
             ? '@storybook/builder-vite'

code/lib/cli/src/automigrate/fixes/cra5.test.ts

@@ -109,6 +109,7 @@ describe('cra5 fix', () => {
       });
     });
     describe('no cra dependency', () => {
+      // @ts-expect-error (Type 'null' is not comparable)
       const packageManager = {
         getPackageVersion: () => {
           return null;

code/lib/cli/src/automigrate/fixes/eslint-plugin.test.ts

@@ -93,9 +93,9 @@ describe('eslint-plugin fix', () => {
           checkEslint({
             packageJson,
           })
-        ).resolves.toMatchObject({
-          unsupportedExtension: undefined,
-        });
+        ).rejects.toThrowErrorMatchingInlineSnapshot(
+          `"warn: Unable to find .eslintrc config file, skipping"`
+        );
       });
 
       it('when .eslintrc is using unsupported extension', async () => {
@@ -104,7 +104,9 @@ describe('eslint-plugin fix', () => {
             packageJson,
             eslintExtension: 'yml',
           })
-        ).resolves.toMatchObject({ unsupportedExtension: 'yml' });
+        ).rejects.toThrowErrorMatchingInlineSnapshot(
+          `"warn: Unable to find .eslintrc config file, skipping"`
+        );
       });
     });
   });

code/lib/cli/src/automigrate/fixes/eslint-plugin.ts

@@ -33,15 +33,15 @@ export const eslintPlugin: Fix<EslintPluginRunOptions> = {
       return null;
     }
 
-    let eslintFile;
-    let unsupportedExtension;
+    let eslintFile: string | null = null;
+    let unsupportedExtension: string | undefined;
     try {
       eslintFile = findEslintFile();
     } catch (err) {
-      unsupportedExtension = err.message;
+      unsupportedExtension = String(err);
     }
 
-    if (!eslintFile && !unsupportedExtension) {
+    if (!eslintFile || !unsupportedExtension) {
       logger.warn('Unable to find .eslintrc config file, skipping');
       return null;
     }

code/lib/cli/src/automigrate/fixes/mdx-1-to-2.ts

@@ -47,7 +47,7 @@ export const mdx1to2: Fix<Mdx1to2Options> = {
 
   async check() {
     const storiesMdxFiles = await globby('./!(node_modules)**/*.(story|stories).mdx');
-    return storiesMdxFiles.length ? { storiesMdxFiles } : undefined;
+    return storiesMdxFiles.length ? { storiesMdxFiles } : null;
   },
 
   prompt({ storiesMdxFiles }) {

code/lib/cli/src/automigrate/fixes/mdx-gfm.ts

@@ -33,6 +33,10 @@ export const mdxgfm: Fix<Options> = {
 
       let pattern;
 
+      if (typeof configDir === 'undefined') {
+        return false;
+      }
+
       if (typeof item === 'string') {
         pattern = slash(join(configDir, item));
       } else if (typeof item === 'object') {
@@ -41,6 +45,10 @@ export const mdxgfm: Fix<Options> = {
         pattern = slash(join(configDir, directory, files));
       }
 
+      if (!pattern) {
+        return false;
+      }
+
       const files = await glob(pattern, commonGlobOptions(pattern));
 
       return files.some((f) => f.endsWith('.mdx'));
@@ -94,7 +102,7 @@ export const mdxgfm: Fix<Options> = {
         [`@storybook/addon-mdx-gfm@${versionToInstall}`]
       );
 
-      await updateMainConfig({ mainConfigPath, dryRun }, async (main) => {
+      await updateMainConfig({ mainConfigPath, dryRun: !!dryRun }, async (main) => {
         logger.info(`✅ Adding "@storybook/addon-mdx-gfm" addon`);
         if (!dryRun) {
           main.appendValueToArray(['addons'], '@storybook/addon-mdx-gfm');

code/lib/cli/src/automigrate/fixes/missing-babelrc.test.ts

@@ -69,7 +69,7 @@ describe('missing-babelrc fix', () => {
   afterEach(jest.restoreAllMocks);
 
   it('skips when storybook version < 7.0.0', async () => {
-    await expect(check({ storybookVersion: '6.3.2' })).resolves.toBeNull();
+    await expect(check({ storybookVersion: '6.3.2', main: {} })).resolves.toBeNull();
   });
 
   it('skips when babelrc config is present', async () => {

code/lib/cli/src/automigrate/fixes/missing-babelrc.ts

@@ -52,7 +52,7 @@ export const missingBabelRc: Fix<MissingBabelRcOptions> = {
         filename: '__fake__.js', // somehow needed to detect .babelrc.* files
       });
 
-      if (!config.config && !config.babelrc && !packageJson.babel) {
+      if (!config?.config && !config?.babelrc && !packageJson.babel) {
         return { needsBabelRc: true };
       }
     }

code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts

@@ -26,6 +26,7 @@ const checkNewFrameworks = async ({
     storybookVersion,
     rendererPackage,
     configDir: '',
+    mainConfigPath: ' ',
   });
 };
 

code/lib/cli/src/automigrate/fixes/new-frameworks.ts

@@ -4,6 +4,7 @@ import semver from 'semver';
 import { frameworkPackages, rendererPackages } from '@storybook/core-common';
 
 import type { Preset } from '@storybook/types';
+import invariant from 'tiny-invariant';
 import type { Fix } from '../types';
 import { getStorybookVersionSpecifier } from '../../helpers';
 import {
@@ -26,13 +27,13 @@ interface NewFrameworkRunOptions {
   dependenciesToRemove: string[];
   hasFrameworkInMainConfig: boolean;
   frameworkPackage: string;
-  metaFramework: string;
+  metaFramework: string | undefined;
   renderer: string;
   addonsToRemove: string[];
   frameworkOptions: Record<string, any>;
   rendererOptions: Record<string, any>;
   addonOptions: Record<string, any>;
-  builderConfig: string | Record<string, any>;
+  builderConfig: string | Record<string, any> | undefined;
   builderInfo: {
     name: string;
     options: Record<string, any>;
@@ -69,13 +70,17 @@ export const newFrameworks: Fix<NewFrameworkRunOptions> = {
       return null;
     }
 
+    if (typeof configDir === 'undefined') {
+      return null;
+    }
+
     const packageJson = await packageManager.retrievePackageJson();
 
     const frameworkPackageName = getFrameworkPackageName(mainConfig);
 
     const rendererPackageName =
       rendererPackage ??
-      (await getRendererPackageNameFromFramework(frameworkPackageName)) ??
+      (await getRendererPackageNameFromFramework(frameworkPackageName as string)) ??
       (await detectRenderer(packageJson));
 
     let hasFrameworkInMainConfig = !!frameworkPackageName;
@@ -220,7 +225,9 @@ export const newFrameworks: Fix<NewFrameworkRunOptions> = {
       `);
     }
 
-    return {
+    invariant(mainConfigPath, 'Missing main config path.');
+
+    const result: Awaited<ReturnType<Fix<NewFrameworkRunOptions>['check']>> = {
       mainConfigPath,
       dependenciesToAdd,
       dependenciesToRemove,
@@ -239,6 +246,7 @@ export const newFrameworks: Fix<NewFrameworkRunOptions> = {
       builderConfig,
       metaFramework,
     };
+    return result;
   },
 
   prompt({
@@ -453,7 +461,7 @@ export const newFrameworks: Fix<NewFrameworkRunOptions> = {
       }
     }
 
-    await updateMainConfig({ mainConfigPath, dryRun }, async (main) => {
+    await updateMainConfig({ mainConfigPath, dryRun: !!dryRun }, async (main) => {
       logger.info(`✅ Updating main.js`);
 
       logger.info(`✅ Updating "framework" field`);

code/lib/cli/src/automigrate/fixes/sb-scripts.ts

@@ -1,6 +1,7 @@
 import chalk from 'chalk';
 import { dedent } from 'ts-dedent';
 import semver from 'semver';
+import type { PackageJson } from '@storybook/types';
 import type { Fix } from '../types';
 import type { PackageJsonWithDepsAndDevDeps } from '../../js-package-manager';
 
@@ -18,10 +19,14 @@ const logger = console;
  * that do contain the actual sb binary, and not something like "npm run start-storybook"
  * which could actually be a custom script even though the name matches the legacy binary name
  */
-export const getStorybookScripts = (allScripts: Record<string, string>) => {
+export const getStorybookScripts = (allScripts: NonNullable<PackageJson['scripts']>) => {
   return Object.keys(allScripts).reduce((acc, key) => {
+    const currentScript = allScripts[key];
+    if (currentScript == null) {
+      return acc;
+    }
     let isStorybookScript = false;
-    const allWordsFromScript = allScripts[key].split(' ');
+    const allWordsFromScript = currentScript.split(' ');
     const newScript = allWordsFromScript
       .map((currentWord, index) => {
         const previousWord = allWordsFromScript[index - 1];
@@ -51,7 +56,7 @@ export const getStorybookScripts = (allScripts: Record<string, string>) => {
 
     if (isStorybookScript) {
       acc[key] = {
-        before: allScripts[key],
+        before: currentScript,
         after: newScript,
       };
     }
@@ -90,7 +95,7 @@ export const sbScripts: Fix<SbScriptsRunOptions> = {
   prompt({ storybookVersion, storybookScripts }) {
     const sbFormatted = chalk.cyan(`Storybook ${storybookVersion}`);
 
-    const newScriptsMessage = Object.keys(storybookScripts).reduce((acc, scriptKey) => {
+    const newScriptsMessage = Object.keys(storybookScripts).reduce((acc: string[], scriptKey) => {
       acc.push(
         [
           chalk.bold(scriptKey),

code/lib/cli/src/automigrate/fixes/vue3.test.ts

@@ -133,6 +133,7 @@ describe('vue3 fix', () => {
     });
     describe('no vue dependency', () => {
       it('should no-op', async () => {
+        // @ts-expect-error (Type 'null' is not comparable)
         const packageManager = {
           getPackageVersion: (packageName) => {
             return null;

code/lib/cli/src/automigrate/fixes/webpack5.test.ts

@@ -132,6 +132,7 @@ describe('webpack5 fix', () => {
       });
     });
     describe('no webpack dependency', () => {
+      // @ts-expect-error (Type 'null' is not comparable)
       const packageManager = {
         getPackageVersion: () => {
           return null;

code/lib/cli/src/automigrate/fixes/webpack5.ts

@@ -8,7 +8,7 @@ import { updateMainConfig } from '../helpers/mainConfigFile';
 const logger = console;
 
 interface Webpack5RunOptions {
-  webpackVersion: string;
+  webpackVersion: string | null;
   storybookVersion: string;
 }
 
@@ -22,7 +22,7 @@ interface Webpack5RunOptions {
  * - Add core.builder = 'webpack5' to main.js
  * - Add 'webpack5' as a project dependency
  */
-export const webpack5: Fix<Webpack5RunOptions> = {
+export const webpack5 = {
   id: 'webpack5',
 
   async check({ configDir, packageManager, mainConfig, storybookVersion }) {
@@ -75,9 +75,9 @@ export const webpack5: Fix<Webpack5RunOptions> = {
 
     logger.info('✅ Setting `core.builder` to `@storybook/builder-webpack5` in main.js');
     if (!dryRun) {
-      await updateMainConfig({ mainConfigPath, dryRun }, async (main) => {
+      await updateMainConfig({ mainConfigPath, dryRun: !!dryRun }, async (main) => {
         main.setFieldValue(['core', 'builder'], '@storybook/builder-webpack5');
       });
     }
   },
-};
+} satisfies Fix<Webpack5RunOptions>;