Merge pull request #18617 from storybookjs/future/base-with-next

Future/base with next

addons/a11y/src/components/A11yContext.tsx

@@ -23,9 +23,9 @@ interface A11yContextStore {
 }
 
 const colorsByType = [
-  convert(themes.normal).color.negative, // VIOLATION,
-  convert(themes.normal).color.positive, // PASS,
-  convert(themes.normal).color.warning, // INCOMPLETION,
+  convert(themes.light).color.negative, // VIOLATION,
+  convert(themes.light).color.positive, // PASS,
+  convert(themes.light).color.warning, // INCOMPLETION,
 ];
 
 export const A11yContext = React.createContext<A11yContextStore>({

addons/interactions/README.md

@@ -41,22 +41,25 @@ Interactions relies on "instrumented" versions of Jest and Testing Library, that
 `@storybook/testing-library` instead of their original package. You can then use these libraries in your `play` function.
 
 ```js
+import { Button } from './Button';
 import { expect } from '@storybook/jest';
 import { within, userEvent } from '@storybook/testing-library';
 
 export default {
   title: 'Button',
+  component: Button,
   argTypes: {
     onClick: { action: true },
   },
 };
 
-export const Demo = {
-  play: async ({ args, canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button'));
-    await expect(args.onClick).toHaveBeenCalled();
-  },
+const Template = (args) => <Button {...args} />;
+
+export const Demo = Template.bind({});
+Demo.play = async ({ args, canvasElement }) => {
+  const canvas = within(canvasElement);
+  await userEvent.click(canvas.getByRole('button'));
+  await expect(args.onClick).toHaveBeenCalled();
 };
 ```
 

addons/interactions/src/components/List.tsx

@@ -12,26 +12,26 @@ const ListWrapper = styled.ul({
 const Wrapper = styled.div({
   display: 'flex',
   width: '100%',
-  borderBottom: `1px solid ${convert(themes.normal).appBorderColor}`,
+  borderBottom: `1px solid ${convert(themes.light).appBorderColor}`,
   '&:hover': {
-    background: convert(themes.normal).background.hoverable,
+    background: convert(themes.light).background.hoverable,
   },
 });
 
 const Icon = styled(Icons)<IconsProps>({
   height: 10,
   width: 10,
   minWidth: 10,
-  color: convert(themes.normal).color.mediumdark,
+  color: convert(themes.light).color.mediumdark,
   marginRight: 10,
   transition: 'transform 0.1s ease-in-out',
   alignSelf: 'center',
   display: 'inline-flex',
 });
 
 const HeaderBar = styled.div({
-  padding: convert(themes.normal).layoutMargin,
-  paddingLeft: convert(themes.normal).layoutMargin - 3,
+  padding: convert(themes.light).layoutMargin,
+  paddingLeft: convert(themes.light).layoutMargin - 3,
   background: 'none',
   color: 'inherit',
   textAlign: 'left',
@@ -41,13 +41,13 @@ const HeaderBar = styled.div({
 
   '&:focus': {
     outline: '0 none',
-    borderLeft: `3px solid ${convert(themes.normal).color.secondary}`,
+    borderLeft: `3px solid ${convert(themes.light).color.secondary}`,
   },
 });
 
 const Description = styled.div({
-  padding: convert(themes.normal).layoutMargin,
-  marginBottom: convert(themes.normal).layoutMargin,
+  padding: convert(themes.light).layoutMargin,
+  marginBottom: convert(themes.light).layoutMargin,
   fontStyle: 'italic',
 });
 
@@ -69,7 +69,7 @@ export const ListItem: React.FC<ListItemProps> = ({ item }) => {
         <HeaderBar onClick={() => onToggle(!open)} role="button">
           <Icon
             icon="chevrondown"
-            color={convert(themes.normal).appBorderColor}
+            color={convert(themes.light).appBorderColor}
             style={{
               transform: `rotate(${open ? 0 : -90}deg)`,
             }}

addons/jest/src/components/Panel.tsx

@@ -99,13 +99,13 @@ const getColorByType = (type: string) => {
   // using switch to allow for new types to be added
   switch (type) {
     case StatusTypes.PASSED_TYPE:
-      return convert(themes.normal).color.positive;
+      return convert(themes.light).color.positive;
     case StatusTypes.FAILED_TYPE:
-      return convert(themes.normal).color.negative;
+      return convert(themes.light).color.negative;
     case StatusTypes.PENDING_TYPE:
-      return convert(themes.normal).color.warning;
+      return convert(themes.light).color.warning;
     case StatusTypes.TODO_TYPE:
-      return convert(themes.normal).color.purple;
+      return convert(themes.light).color.purple;
     default:
       return null;
   }
@@ -154,7 +154,7 @@ const Content = styled(({ tests, className }: ContentProps) => (
                 </SuiteHead>
                 <TabsState
                   initial="failing-tests"
-                  backgroundColor={convert(themes.normal).background.hoverable}
+                  backgroundColor={convert(themes.light).background.hoverable}
                 >
                   <div
                     id="failing-tests"

addons/jest/src/components/Result.tsx

@@ -67,7 +67,7 @@ export function Result(props: ResultProps) {
             <Icon
               icon="chevrondown"
               size={10}
-              color={convert(themes.normal).color.mediumdark}
+              color={convert(themes.light).color.mediumdark}
               style={{
                 transform: `rotate(${isOpen ? 0 : -90}deg)`,
               }}

addons/storyshots/storyshots-core/src/test-bodies.ts

@@ -1,15 +1,21 @@
 import 'jest-specific-snapshot';
-import { StoryshotsTestMethod, TestMethodOptions } from './api/StoryshotsOptions';
+import {
+  StoryshotsTestMethod,
+  TestMethodOptions,
+  StoryshotsOptions,
+} from './api/StoryshotsOptions';
 
 const isFunction = (obj: any) => !!(obj && obj.constructor && obj.call && obj.apply);
 const optionsOrCallOptions = (opts: any, story: any) => (isFunction(opts) ? opts(story) : opts);
 
+type SnapshotsWithOptionsArgType = Pick<StoryshotsOptions, 'renderer' | 'serializer'> | Function;
+
 type SnapshotsWithOptionsReturnType = (
   options: Pick<TestMethodOptions, 'story' | 'context' | 'renderTree' | 'snapshotFileName'>
 ) => any;
 
 export function snapshotWithOptions(
-  options: { renderer?: any; serializer?: any } | Function = {}
+  options: SnapshotsWithOptionsArgType = {}
 ): SnapshotsWithOptionsReturnType {
   return ({ story, context, renderTree, snapshotFileName }) => {
     const result = renderTree(story, context, optionsOrCallOptions(options, story));
@@ -44,7 +50,9 @@ export function snapshotWithOptions(
   };
 }
 
-export function multiSnapshotWithOptions(options = {}): StoryshotsTestMethod {
+export function multiSnapshotWithOptions(
+  options: SnapshotsWithOptionsArgType = {}
+): StoryshotsTestMethod {
   return ({ story, context, renderTree, stories2snapsConverter }) => {
     const snapshotFileName = stories2snapsConverter.getSnapshotFileName(context);
     return snapshotWithOptions(options)({ story, context, renderTree, snapshotFileName });

addons/storyshots/storyshots-puppeteer/package.json

@@ -42,11 +42,12 @@
   },
   "devDependencies": {
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@types/puppeteer": "^5.4.0"
+    "@types/puppeteer": "^5.4.0",
+    "puppeteer": "^2.0.0 || ^3.0.0"
   },
   "peerDependencies": {
     "@storybook/addon-storyshots": "7.0.0-alpha.8",
-    "puppeteer": "^2.0.0 || ^3.0.0"
+    "puppeteer": ">=2.0.0"
   },
   "peerDependenciesMeta": {
     "puppeteer": {

addons/storyshots/storyshots-puppeteer/src/config.ts

@@ -1,11 +1,7 @@
 import { MatchImageSnapshotOptions } from 'jest-image-snapshot';
-import {
-  Base64ScreenShotOptions,
-  Browser,
-  DirectNavigationOptions,
-  Page,
-  ElementHandle,
-} from 'puppeteer';
+import { ScreenshotOptions, Browser, Page, ElementHandle } from 'puppeteer';
+
+type PuppeteerLifeCycleEvent = 'load' | 'domcontentloaded' | 'networkidle0' | 'networkidle2';
 
 export interface Context {
   kind: string;
@@ -20,6 +16,16 @@ interface Options {
   url: string;
 }
 
+interface Base64ScreenShotOptions extends ScreenshotOptions {
+  encoding: 'base64';
+}
+
+interface DirectNavigationOptions {
+  referer?: string;
+  timeout?: number;
+  waitUntil?: PuppeteerLifeCycleEvent | PuppeteerLifeCycleEvent[];
+}
+
 export interface CommonConfig {
   storybookUrl: string;
   chromeExecutablePath: string;
@@ -40,7 +46,7 @@ export interface ImageSnapshotConfig extends CommonConfig {
   getMatchOptions: (options: Options) => MatchImageSnapshotOptions;
   getScreenshotOptions: (options: Options) => Base64ScreenShotOptions;
   beforeScreenshot: (page: Page, options: Options) => Promise<void | ElementHandle>;
-  afterScreenshot: (options: { image: string; context: Context }) => Promise<void>;
+  afterScreenshot: (options: { image: string | void | Buffer; context: Context }) => Promise<void>;
 }
 
 export interface AxeConfig extends CommonConfig {

addons/storysource/package.json

@@ -44,7 +44,7 @@
     "core-js": "^3.8.2",
     "estraverse": "^5.2.0",
     "prop-types": "^15.7.2",
-    "react-syntax-highlighter": "^15.4.5"
+    "react-syntax-highlighter": "^15.5.0"
   },
   "devDependencies": {
     "@types/react": "^16.14.23",

docs/addons/writing-addons.md

@@ -66,7 +66,7 @@ We'll need to add the necessary dependencies and make some adjustments. Run the
 Initialize a local Storybook instance to allow you to test your addon.
 
 ```shell
-npx sb init
+npx storybook init
 ```
 
 <div class="aside">

docs/builders/overview.md

@@ -8,12 +8,12 @@ Storybook, at its core, is powered by builders such as Webpack and Vite. These b
 
 ## CLI basics
 
-Before diving into setting up Storybook's builders, let's look at how the CLI configures them. When you initialize Storybook (via `npx sb init`), the CLI automatically detects which builder to use based on your application. For example, if you're working with Vite, it will install the Vite builder. If you're working with Webpack, it installs the Webpack builder based on your current version.
+Before diving into setting up Storybook's builders, let's look at how the CLI configures them. When you initialize Storybook (via `npx storybook init`), the CLI automatically detects which builder to use based on your application. For example, if you're working with Vite, it will install the Vite builder. If you're working with Webpack, it installs the Webpack builder based on your current version.
 
 Additionally, you can also provide a flag to Storybook's CLI and specify the builder you want to use:
 
 ```shell
-npx sb init --builder <webpack4 | webpack5 | vite>
+npx storybook init --builder <webpack4 | webpack5 | vite>
 ```
 
 ## Manual setup

docs/builders/vite.md

@@ -9,7 +9,7 @@ Storybook Vite builder bundles your components and stories with [Vite](https://v
 
 ## Setup
 
-If you ran `npx sb init` to include Storybook in your Vite application, the builder is already installed and configured for you. If you want, you can also opt into it manually.
+If you ran `npx storybook init` to include Storybook in your Vite application, the builder is already installed and configured for you. If you want, you can also opt into it manually.
 
 Run the following command to install the builder.
 

docs/configure/babel.md

@@ -81,7 +81,7 @@ For detailed instructions on migrating from `V6` mode, please see [MIGRATION.md]
 If your app does not include a babelrc file, and you need one, you can create it by running the following command in your project directory:
 
 ```sh
-npx sb@next babelrc
+npx storybook@next babelrc
 ```
 
 Once the command completes, you should have a `.babelrc.json` file created in the root directory of your project, similar to the following example:

docs/configure/upgrading.md

@@ -11,7 +11,7 @@ The most common upgrade is Storybook itself. [Storybook releases](https://storyb
 To help ease the pain of keeping Storybook up-to-date, we provide a command-line script:
 
 ```sh
-npx sb upgrade
+npx storybook upgrade
 ```
 
 This upgrades all of the Storybook packages in your project to the latest stable version, perform confidence checks of your package versions, and checks for opportunities to run [automigrations](#automigrate) to update your configuration automatically.
@@ -27,10 +27,10 @@ In addition to running the command, we also recommend checking the [MIGRATION.md
 Storybook upgrades are not the only thing to consider: changes in the ecosystem also present challenges. For example, lots of frameworks ([Angular 12](https://angular.io/guide/updating-to-version-12#breaking-changes-in-angular-version-12), [Create React App v5](https://github.com/facebook/create-react-app/pull/11201), [NextJS](https://nextjs.org/docs/upgrading#webpack-5)) have recently migrated from [Webpack 4 to Webpack 5](https://webpack.js.org/migrate/5/), so even if you don't upgrade your Storybook version, you might need to update your configuration accordingly. That's what Automigrate is for:
 
 ```
-npx sb@next automigrate
+npx storybook@next automigrate
 ```
 
-It runs a set of standard configuration checks, explains what is potentially out-of-date, and offers to fix it for you automatically. It also points to the relevant documentation so you can learn more. It runs automatically as part of [`sb upgrade`](#upgrade-script) command, but it's also available on its own if you don't want to upgrade Storybook.
+It runs a set of standard configuration checks, explains what is potentially out-of-date, and offers to fix it for you automatically. It also points to the relevant documentation so you can learn more. It runs automatically as part of [`storybook upgrade`](#upgrade-script) command, but it's also available on its own if you don't want to upgrade Storybook.
 
 ## Prereleases
 
@@ -39,11 +39,13 @@ In addition to the above, Storybook is under constant development, and we publis
 To upgrade to the latest pre-release:
 
 ```sh
-npx sb@next upgrade --prerelease
+npx storybook@next upgrade --prerelease
 ```
 
 If you'd like to downgrade to a stable version, manually edit the package version numbers in your `package.json` and re-install.
 
 <div class="aside">
+
 Storybook collects completely anonymous data to help us improve user experience. Participation is optional, and you may [opt-out](../configure/telemetry.md#how-to-opt-out) if you'd not like to share any information.
+
 </div>

docs/contribute/code.md

@@ -136,19 +136,19 @@ We encourage bug reports to include reproductions. In the same way that it's pos
 To do so, run the following command in the root of the monorepo:
 
 ```shell
-npx sb@next link https://github.com/your-username/your-project.git
+npx storybook@next link https://github.com/your-username/your-project.git
 ```
 
 This command creates a project `../storybook-repros/your-project`, and automatically links it to your local Storybook code. After connecting it, you should be able to run Storybook and develop as mentioned [above](#start-developing).
 
 If you already have a reproduction on your local machine, you can similarly link it to your monorepo dev setup with the `--local` flag:
 
 ```shell
-npx sb@next link --local /path/to/local-repro-directory
+npx storybook@next link --local /path/to/local-repro-directory
 ```
 
 <div class="aside">
-💡  The <code>sb link</code> command relies on <code>yarn 2</code> linking under the hood. It requires that the local repro is using <code>yarn 2</code>, which will be the case if you're using the [<code>sb repro</code> command](./how-to-reproduce) per our contributing guidelines. If you are trying to link to a non-<code>yarn 2</code> project, linking will fail.
+💡  The <code>storybook link</code> command relies on <code>yarn 2</code> linking under the hood. It requires that the local repro is using <code>yarn 2</code>, which will be the case if you're using the [<code>storybook repro</code> command](./how-to-reproduce) per our contributing guidelines. If you are trying to link to a non-<code>yarn 2</code> project, linking will fail.
 </div>
 
 ## Troubleshooting

docs/contribute/how-to-reproduce.md

@@ -21,7 +21,7 @@ Make sure you have:
 First, open a terminal and run the following command:
 
 ```shell
-npx sb@next repro
+npx storybook@next repro
 ```
 
 <div class="aside">

docs/essentials/introduction.md

@@ -15,7 +15,7 @@ A major strength of Storybook are [addons](https://storybook.js.org/addons) that
 
 ### Installation
 
-If you ran `sb init` to include Storybook in your project, the Essentials addon ([`@storybook/addon-essentials`](https://storybook.js.org/addons/tag/essentials)) is already installed and configured for you. You can skip the rest of this section.
+If you ran `storybook init` to include Storybook in your project, the Essentials addon ([`@storybook/addon-essentials`](https://storybook.js.org/addons/tag/essentials)) is already installed and configured for you. You can skip the rest of this section.
 
 If you're upgrading from a previous Storybook version, you'll need to run the following command in your terminal:
 

docs/get-started/installation-problems/angular.mdx

@@ -1,20 +1,19 @@
-- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
-  If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
+- Add the `--type angular` flag to the installation command to set up Storybook manually:
 
   ```shell
-  npx storybook init --use-npm
+  npx storybook init --type angular
   ```
 
-- Add the `--type angular` flag to the installation command to set up Storybook manually:
+- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
 
   ```shell
-  npx sb init --type angular
+  npx storybook init --use-npm
   ```
 
 - Storybook supports Webpack 5 out of the box. If you're upgrading from a previous version, run the following command to enable it:
 
   ```shell
-  npx sb@next automigrate
+  npx storybook@next automigrate
   ```
 
   Check the [Migration Guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#automigrate) for more information on how to set up Webpack 5.
@@ -26,7 +25,7 @@
 - If you need further customization to the Storybook builder configuration, you can use the following table as a reference:
 
 | Configuration element        | Description                                                                                                                                                                                      |
-|------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `"browserTarget"`            | Build target to be served using the following format. <br/> `"example-project:builder:config"`                                                                                                   |
 | `"tsConfig"`                 | Location of the TypeScript configuration file, relative to the current workspace. <br/> `"tsConfig": "./tsconfig.json"`.                                                                         |
 | `"port"`                     | Port used by Storybook. <br/> `"port": 6006`                                                                                                                                                     |