@storybook/cli 7.0.0-alpha.3 → 7.0.0-alpha.30

package/dist/types/js-package-manager/NPMProxy.d.ts

@@ -1,12 +1,23 @@
 import { JsPackageManager } from './JsPackageManager';
+import type { PackageJson } from './PackageJson';
 export declare class NPMProxy extends JsPackageManager {
     readonly type = "npm";
     installArgs: string[] | undefined;
+    uninstallArgs: string[] | undefined;
     initPackageJson(): string;
     getRunStorybookCommand(): string;
     getRunCommand(command: string): string;
+    getNpmVersion(): string;
+    hasLegacyPeerDeps(): boolean;
+    setLegacyPeerDeps(): void;
+    needsLegacyPeerDeps(version: string): boolean;
     getInstallArgs(): string[];
+    getUninstallArgs(): string[];
+    protected getResolutions(packageJson: PackageJson, versions: Record<string, string>): {
+        overrides: any;
+    };
     protected runInstall(): void;
     protected runAddDeps(dependencies: string[], installAsDevDependencies: boolean): void;
+    protected runRemoveDeps(dependencies: string[]): void;
     protected runGetVersions<T extends boolean>(packageName: string, fetchAllVersions: T): Promise<T extends true ? string[] : string>;
 }

package/dist/types/js-package-manager/Yarn1Proxy.d.ts

@@ -1,10 +1,17 @@
 import { JsPackageManager } from './JsPackageManager';
+import type { PackageJson } from './PackageJson';
 export declare class Yarn1Proxy extends JsPackageManager {
     readonly type = "yarn1";
     initPackageJson(): string;
     getRunStorybookCommand(): string;
     getRunCommand(command: string): string;
+    protected getResolutions(packageJson: PackageJson, versions: Record<string, string>): {
+        resolutions: {
+            [x: string]: string;
+        };
+    };
     protected runInstall(): void;
     protected runAddDeps(dependencies: string[], installAsDevDependencies: boolean): void;
+    protected runRemoveDeps(dependencies: string[]): void;
     protected runGetVersions<T extends boolean>(packageName: string, fetchAllVersions: T): Promise<T extends true ? string[] : string>;
 }

package/dist/types/js-package-manager/Yarn2Proxy.d.ts

@@ -1,10 +1,17 @@
 import { JsPackageManager } from './JsPackageManager';
+import type { PackageJson } from './PackageJson';
 export declare class Yarn2Proxy extends JsPackageManager {
     readonly type = "yarn2";
     initPackageJson(): string;
     getRunStorybookCommand(): string;
     getRunCommand(command: string): string;
+    protected getResolutions(packageJson: PackageJson, versions: Record<string, string>): {
+        resolutions: {
+            [x: string]: string;
+        };
+    };
     protected runInstall(): void;
     protected runAddDeps(dependencies: string[], installAsDevDependencies: boolean): void;
+    protected runRemoveDeps(dependencies: string[]): void;
     protected runGetVersions<T extends boolean>(packageName: string, fetchAllVersions: T): Promise<T extends true ? string[] : string>;
 }

package/dist/types/js-package-manager/index.d.ts

@@ -1,4 +1,3 @@
 export * from './JsPackageManagerFactory';
 export * from './JsPackageManager';
 export * from './PackageJson';
-export * from './PackageJsonHelper';

package/dist/types/link.d.ts

@@ -1,6 +1,7 @@
 interface LinkOptions {
     target: string;
     local?: boolean;
+    start: boolean;
 }
-export declare const link: ({ target, local }: LinkOptions) => Promise<void>;
+export declare const link: ({ target, local, start }: LinkOptions) => Promise<void>;
 export {};

package/dist/types/repro-generators/scripts.d.ts

@@ -26,6 +26,7 @@ interface Configuration {
     e2e: boolean;
     pnp: boolean;
     local: boolean;
+    registry?: string;
 }
 export interface Options extends Parameters {
     appName: string;
@@ -34,9 +35,10 @@ export interface Options extends Parameters {
     e2e: boolean;
     pnp: boolean;
 }
-export declare const exec: (command: string, options?: ExecOptions, { startMessage, errorMessage }?: {
+export declare const exec: (command: string, options?: ExecOptions, { startMessage, errorMessage, dryRun, }?: {
     startMessage?: string;
     errorMessage?: string;
+    dryRun?: boolean;
 }) => Promise<unknown>;
-export declare const createAndInit: (cwd: string, { name, version, ...rest }: Parameters, { e2e, pnp, local }: Configuration) => Promise<void>;
+export declare const createAndInit: (cwd: string, { name, version, ...rest }: Parameters, { e2e, pnp, local, registry }: Configuration) => Promise<void>;
 export {};

package/dist/types/repro-next.d.ts

@@ -0,0 +1,8 @@
+interface ReproOptions {
+    filterValue?: string;
+    output?: string;
+    branch?: string;
+    init?: boolean;
+}
+export declare const reproNext: ({ output: outputDirectory, filterValue, branch, init, }: ReproOptions) => Promise<void>;
+export {};

package/dist/types/repro-templates.d.ts

@@ -0,0 +1,73 @@
+declare const _default: {
+    readonly 'svelte-vite/default-js': {
+        name: string;
+        script: string;
+        cadence: string[];
+        expected: {
+            framework: string;
+            renderer: string;
+            builder: string;
+        };
+    };
+    readonly 'vue3-vite/default-js': {
+        name: string;
+        script: string;
+        cadence: string[];
+        expected: {
+            framework: string;
+            renderer: string;
+            builder: string;
+        };
+    };
+    readonly 'vue3-vite/default-ts': {
+        name: string;
+        script: string;
+        cadence: string[];
+        expected: {
+            framework: string;
+            renderer: string;
+            builder: string;
+        };
+    };
+    readonly 'react-vite/default-js': {
+        name: string;
+        script: string;
+        cadence: string[];
+        expected: {
+            framework: string;
+            renderer: string;
+            builder: string;
+        };
+    };
+    readonly 'react-vite/default-ts': {
+        name: string;
+        script: string;
+        cadence: string[];
+        expected: {
+            framework: string;
+            renderer: string;
+            builder: string;
+        };
+    };
+    readonly 'cra/default-js': {
+        name: string;
+        script: string;
+        cadence: string[];
+        expected: {
+            framework: string;
+            renderer: string;
+            builder: string;
+        };
+    };
+    readonly 'cra/default-ts': {
+        name: string;
+        script: string;
+        cadence: string[];
+        expected: {
+            framework: string;
+            renderer: string;
+            builder: string;
+        };
+    };
+};
+export default _default;

package/dist/types/repro.d.ts

@@ -5,9 +5,10 @@ interface ReproOptions {
     list?: boolean;
     template?: string;
     e2e?: boolean;
+    registry?: string;
     local?: boolean;
     generator?: string;
     pnp?: boolean;
 }
-export declare const repro: ({ outputDirectory, list, template, renderer, generator, e2e, local, pnp, }: ReproOptions) => Promise<void>;
+export declare const repro: ({ outputDirectory, list, template, renderer, generator, e2e, local, registry, pnp, }: ReproOptions) => Promise<void>;
 export {};

package/dist/types/versions.d.ts

@@ -5,6 +5,7 @@ declare const _default: {
     '@storybook/addon-controls': string;
     '@storybook/addon-docs': string;
     '@storybook/addon-essentials': string;
+    '@storybook/addon-highlight': string;
     '@storybook/addon-interactions': string;
     '@storybook/addon-jest': string;
     '@storybook/addon-links': string;
@@ -18,6 +19,9 @@ declare const _default: {
     '@storybook/addons': string;
     '@storybook/angular': string;
     '@storybook/api': string;
+    '@storybook/blocks': string;
+    '@storybook/builder-manager': string;
+    '@storybook/builder-vite': string;
     '@storybook/builder-webpack5': string;
     '@storybook/channel-postmessage': string;
     '@storybook/channel-websocket': string;
@@ -38,7 +42,6 @@ declare const _default: {
     '@storybook/html': string;
     '@storybook/html-webpack5': string;
     '@storybook/instrumenter': string;
-    '@storybook/manager-webpack5': string;
     '@storybook/node-logger': string;
     '@storybook/postinstall': string;
     '@storybook/preact': string;
@@ -53,6 +56,7 @@ declare const _default: {
     '@storybook/preset-web-components-webpack': string;
     '@storybook/preview-web': string;
     '@storybook/react': string;
+    '@storybook/react-vite': string;
     '@storybook/react-webpack5': string;
     '@storybook/router': string;
     '@storybook/server': string;
@@ -60,6 +64,7 @@ declare const _default: {
     '@storybook/source-loader': string;
     '@storybook/store': string;
     '@storybook/svelte': string;
+    '@storybook/svelte-vite': string;
     '@storybook/svelte-webpack5': string;
     '@storybook/telemetry': string;
     '@storybook/theming': string;
@@ -67,6 +72,7 @@ declare const _default: {
     '@storybook/vue': string;
     '@storybook/vue-webpack5': string;
     '@storybook/vue3': string;
+    '@storybook/vue3-vite': string;
     '@storybook/vue3-webpack5': string;
     '@storybook/web-components': string;
     '@storybook/web-components-webpack5': string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/cli",
-  "version": "7.0.0-alpha.3",
+  "version": "7.0.0-alpha.30",
   "description": "Storybook's CLI - easiest method of adding storybook to your projects",
   "keywords": [
     "cli",
@@ -22,13 +22,6 @@
   },
   "license": "MIT",
   "author": "Storybook Team",
-  "typesVersions": {
-    "<3.8": {
-      "*": [
-        "ts3.4/*"
-      ]
-    }
-  },
   "bin": {
     "getstorybook": "./bin/index.js",
     "sb": "./bin/index.js"
@@ -36,29 +29,32 @@
   "files": [
     "bin/**/*",
     "dist/**/*",
+    "rendererAssets/**/*",
     "README.md",
     "*.js",
     "*.d.ts"
   ],
   "scripts": {
-    "prepare": "node ../../scripts/prepare.js",
+    "check": "tsc --noEmit",
+    "prepare": "node ../../../scripts/prepare.js",
     "test": "jest test/**/*.test.js"
   },
   "dependencies": {
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
-    "@storybook/codemod": "7.0.0-alpha.3",
-    "@storybook/core-common": "7.0.0-alpha.3",
-    "@storybook/core-server": "7.0.0-alpha.3",
-    "@storybook/csf-tools": "7.0.0-alpha.3",
-    "@storybook/node-logger": "7.0.0-alpha.3",
+    "@storybook/codemod": "7.0.0-alpha.30",
+    "@storybook/core-common": "7.0.0-alpha.30",
+    "@storybook/core-server": "7.0.0-alpha.30",
+    "@storybook/csf-tools": "7.0.0-alpha.30",
+    "@storybook/node-logger": "7.0.0-alpha.30",
     "@storybook/semver": "^7.3.2",
-    "@storybook/telemetry": "7.0.0-alpha.3",
+    "@storybook/telemetry": "7.0.0-alpha.30",
     "boxen": "^5.1.2",
     "chalk": "^4.1.0",
     "commander": "^6.2.1",
     "core-js": "^3.8.2",
     "cross-spawn": "^7.0.3",
+    "degit": "^2.8.4",
     "envinfo": "^7.7.3",
     "execa": "^5.0.0",
     "express": "^4.17.1",
@@ -66,6 +62,7 @@
     "fs-extra": "^9.0.1",
     "get-port": "^5.1.1",
     "globby": "^11.0.2",
+    "js-yaml": "^3.14.1",
     "jscodeshift": "^0.13.1",
     "json5": "^2.1.3",
     "leven": "^3.1.0",
@@ -78,18 +75,20 @@
     "update-notifier": "^5.0.1"
   },
   "devDependencies": {
-    "@storybook/client-api": "7.0.0-alpha.3",
+    "@storybook/client-api": "7.0.0-alpha.30",
     "@types/cross-spawn": "^6.0.2",
+    "@types/degit": "^2.8.3",
     "@types/prompts": "^2.0.9",
     "@types/puppeteer-core": "^2.1.0",
     "@types/semver": "^7.3.4",
     "@types/shelljs": "^0.8.7",
     "@types/update-notifier": "^5.0.0",
     "strip-json-comments": "^3.1.1",
+    "typescript": "~4.6.3",
     "update-notifier": "^5.0.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "629b056190993bcee6445471b8cb27208eb401a9"
+  "gitHead": "aabf7b595cb13d8a86dca27ad3d6039205bd55d6"
 }

package/rendererAssets/.eslintrc.json

@@ -0,0 +1,11 @@
+{
+  "rules": {
+    "no-undef": "off",
+    "@typescript-eslint/ban-types": "off",
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
+    "import/extensions": "off",
+    "import/no-unresolved": "off",
+    "import/no-extraneous-dependencies": "off"
+  }
+}

package/{dist/cjs/frameworks → rendererAssets}/angular/Button.stories.ts

@@ -1,5 +1,4 @@
-// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
-import { Story, Meta } from '@storybook/angular/types-6-0';
+import type { Meta, StoryFn } from '@storybook/angular';
 import Button from './button.component';
 
 // More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export
@@ -13,7 +12,7 @@ export default {
 } as Meta;
 
 // More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
-const Template: Story<Button> = (args: Button) => {
+const Template: StoryFn<Button> = (args: Button) => {
   return {
     props: { backgroundColor: null, ...args },
   };

package/{dist/esm/frameworks → rendererAssets}/angular/Header.stories.ts

@@ -1,6 +1,6 @@
 import { moduleMetadata } from '@storybook/angular';
 import { CommonModule } from '@angular/common';
-import type { Story, Meta } from '@storybook/angular';
+import type { Meta, StoryFn } from '@storybook/angular';
 
 import Button from './button.component';
 import Header from './header.component';
@@ -20,7 +20,7 @@ export default {
   },
 } as Meta;
 
-const Template: Story<Header> = (args: Header) => ({
+const Template: StoryFn<Header> = (args: Header) => ({
   props: args,
 });
 

package/{dist/esm/frameworks → rendererAssets}/angular/Page.stories.ts

@@ -1,4 +1,4 @@
-import { moduleMetadata, Story, Meta } from '@storybook/angular';
+import { moduleMetadata, StoryFn, Meta } from '@storybook/angular';
 import { within, userEvent } from '@storybook/testing-library';
 import { CommonModule } from '@angular/common';
 
@@ -10,7 +10,7 @@ export default {
   title: 'Example/Page',
   component: Page,
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/angular/configure/story-layout
+    // More on StoryFn layout: https://storybook.js.org/docs/angular/configure/story-layout
     layout: 'fullscreen',
   },
   decorators: [
@@ -21,7 +21,7 @@ export default {
   ],
 } as Meta;
 
-const Template: Story<Page> = (args: Page) => ({
+const Template: StoryFn<Page> = (args: Page) => ({
   props: args,
 });
 

package/{dist/esm/frameworks → rendererAssets}/html/ts/Button.stories.ts

@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/html';
+import type { Meta, StoryFn } from '@storybook/html';
 import { createButton, ButtonProps } from './Button';
 
 // More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
@@ -15,10 +15,10 @@ export default {
       options: ['small', 'medium', 'large'],
     },
   },
-} as Meta;
+} as Meta<ButtonProps>;
 
 // More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
-const Template: Story<ButtonProps> = (args) => {
+const Template: StoryFn<ButtonProps> = (args) => {
   // You can either use a function to create DOM elements or use a plain html string!
   // return `<div>${label}</div>`;
   return createButton(args);

package/{dist/cjs/frameworks → rendererAssets}/html/ts/Button.ts

@@ -36,12 +36,16 @@ export const createButton = ({
   const btn = document.createElement('button');
   btn.type = 'button';
   btn.innerText = label;
-  btn.addEventListener('click', onClick);
+  if (onClick) {
+    btn.addEventListener('click', onClick);
+  }
 
   const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
   btn.className = ['storybook-button', `storybook-button--${size}`, mode].join(' ');
 
-  btn.style.backgroundColor = backgroundColor;
+  if (backgroundColor) {
+    btn.style.backgroundColor = backgroundColor;
+  }
 
   return btn;
 };

package/{dist/esm/frameworks → rendererAssets}/html/ts/Header.stories.ts

@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/html';
+import type { Meta, StoryFn } from '@storybook/html';
 import { createHeader, HeaderProps } from './Header';
 
 export default {
@@ -13,9 +13,9 @@ export default {
     onLogout: { action: 'onLogout' },
     onCreateAccount: { action: 'onCreateAccount' },
   },
-} as Meta;
+} as Meta<HeaderProps>;
 
-const Template: Story<HeaderProps> = (args) => createHeader(args);
+const Template: StoryFn<HeaderProps> = (args) => createHeader(args);
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {

package/{dist/cjs/frameworks → rendererAssets}/html/ts/Page.stories.ts

@@ -1,5 +1,5 @@
 import { within, userEvent } from '@storybook/testing-library';
-import { Story, Meta } from '@storybook/html';
+import type { Meta, StoryFn } from '@storybook/html';
 import { createPage } from './Page';
 
 export default {
@@ -10,7 +10,7 @@ export default {
   },
 } as Meta;
 
-const Template: Story = () => createPage();
+const Template: StoryFn = () => createPage();
 
 export const LoggedOut = Template.bind({});
 

package/{dist/esm/frameworks → rendererAssets}/html/ts/Page.ts

@@ -7,12 +7,12 @@ type User = {
 
 export const createPage = () => {
   const article = document.createElement('article');
-  let user: User = null;
-  let header = null;
+  let user: User | undefined;
+  let header: HTMLElement | null = null;
 
   const rerenderHeader = () => {
     const wrapper = document.getElementsByTagName('article')[0];
-    wrapper.replaceChild(createHeaderElement(), wrapper.firstChild);
+    wrapper.replaceChild(createHeaderElement(), wrapper.firstChild as HTMLElement);
   };
 
   const onLogin = () => {
@@ -21,7 +21,7 @@ export const createPage = () => {
   };
 
   const onLogout = () => {
-    user = null;
+    user = undefined;
     rerenderHeader();
   };