Merge branch 'next' into pr/18588

README.md

@@ -42,17 +42,18 @@
   </a>
 </p>
 
-[Storybook](https://storybook.js.org) is a development environment for UI components.
-It allows you to browse a component library, view the different states of each component, and interactively develop and test components. Find out more at https://storybook.js.org.
+<p align="center">Storybook is a development environment for UI components.<br/>
+It allows you to browse a component library, view the different states of each component, and interactively develop and test components.<br/>Find out more at https://storybook.js.org.</p>
 
 <center>
   <img src="https://raw.githubusercontent.com/storybookjs/storybook/main/media/storybook-intro.gif" width="100%" />
 </center>
 
 <p align="center">
   View README for:<br/>
-  <a href="https://github.com/storybookjs/storybook/blob/main/README.md" title="latest"><img alt="latest" src="https://img.shields.io/npm/v/@storybook/core/latest?style=for-the-badge&logo=storybook&logoColor=ffffff&color=ff4785" /></a>
-  <a href="https://github.com/storybookjs/storybook/blob/next/README.md" title="next"><img alt="next" src="https://img.shields.io/npm/v/@storybook/core/next?style=for-the-badge&logo=storybook&logoColor=ffffff&color=purple" /></a>
+  <a href="https://github.com/storybookjs/storybook/blob/main/README.md" title="latest"><img alt="latest" src="https://img.shields.io/npm/v/@storybook/core/latest?style=for-the-badge&logo=storybook&logoColor=ffffff&color=66BF3C" /></a>
+  <a href="https://github.com/storybookjs/storybook/blob/next/README.md" title="next"><img alt="next" src="https://img.shields.io/npm/v/@storybook/core/next?style=for-the-badge&logo=storybook&logoColor=ffffff&color=1EA7FD" /></a>
+  <a href="https://github.com/storybookjs/storybook/blob/future/base/README.md" title="future"><img alt="future" src="https://img.shields.io/npm/v/@storybook/core-common/future?style=for-the-badge&logo=storybook&logoColor=ffffff&color=FF4785" /></a>
 </p>
 
 ## Table of contents

addons/a11y/src/components/A11yContext.tsx

@@ -22,9 +22,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

@@ -50,11 +50,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": "6.5.0-rc.1",
-    "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

@@ -52,7 +52,7 @@
     "estraverse": "^5.2.0",
     "loader-utils": "^2.0.0",
     "prop-types": "^15.7.2",
-    "react-syntax-highlighter": "^15.4.5",
+    "react-syntax-highlighter": "^15.5.0",
     "regenerator-runtime": "^0.13.7"
   },
   "devDependencies": {

app/angular/src/builders/build-storybook/index.spec.ts

@@ -177,8 +177,6 @@ describe('Build Storybook Builder', () => {
       ['compodoc', '-p', './storybook/tsconfig.ts', '-d', '', '-e', 'json'],
       {
         cwd: '',
-        env: process.env,
-        shell: true,
       }
     );
     expect(buildStandaloneMock).toHaveBeenCalledWith({

app/angular/src/builders/start-storybook/index.spec.ts

@@ -159,8 +159,6 @@ describe('Start Storybook Builder', () => {
       ['compodoc', '-p', './storybook/tsconfig.ts', '-d', '', '-e', 'json'],
       {
         cwd: '',
-        env: process.env,
-        shell: true,
       }
     );
     expect(buildStandaloneMock).toHaveBeenCalledWith({

app/angular/src/builders/utils/run-compodoc.spec.ts

@@ -20,10 +20,7 @@ const builderContextLoggerMock: LoggerApi = {
 };
 
 describe('runCompodoc', () => {
-  const originalEnv = process.env;
-
   beforeEach(() => {
-    process.env = { FOO: 'bar' };
     cpSpawnMock.spawn.mockImplementation(() => ({
       stdout: { on: () => {} },
       stderr: { on: () => {} },
@@ -32,7 +29,6 @@ describe('runCompodoc', () => {
   });
 
   afterEach(() => {
-    process.env = originalEnv;
     jest.clearAllMocks();
   });
 
@@ -55,8 +51,6 @@ describe('runCompodoc', () => {
       ['compodoc', '-p', 'path/to/tsconfig.json', '-d', 'path/to/project'],
       {
         cwd: 'path/to/project',
-        env: { FOO: 'bar' },
-        shell: true,
       }
     );
   });
@@ -80,8 +74,6 @@ describe('runCompodoc', () => {
       ['compodoc', '-d', 'path/to/project', '-p', 'path/to/tsconfig.stories.json'],
       {
         cwd: 'path/to/project',
-        env: { FOO: 'bar' },
-        shell: true,
       }
     );
   });

app/angular/src/builders/utils/run-compodoc.ts

@@ -30,8 +30,6 @@ export const runCompodoc = (
       context.logger.info(finalCompodocArgs.join(' '));
       const child = spawn('npx', finalCompodocArgs, {
         cwd: context.workspaceRoot,
-        env: process.env,
-        shell: true,
       });
 
       child.stdout.on('data', (data) => {

app/ember/package.json

@@ -56,9 +56,10 @@
   },
   "peerDependencies": {
     "@babel/core": "*",
+    "@types/ember__component": "4.0.8",
     "babel-plugin-ember-modules-api-polyfill": "^2.12.0",
     "babel-plugin-htmlbars-inline-precompile": "2 || 3",
-    "ember-source": "^3.16.0"
+    "ember-source": "~3.28.1"
   },
   "engines": {
     "node": ">=10.13.0"

app/ember/src/client/preview/render.ts

@@ -1,12 +1,12 @@
 import global from 'global';
 import dedent from 'ts-dedent';
-import { RenderContext } from '@storybook/store';
+import type { RenderContext } from '@storybook/store';
+// @ts-ignore
+import Component from '@ember/component'; // eslint-disable-line import/no-unresolved
 import { OptionsArgs, EmberFramework } from './types';
 
 const { window: globalWindow, document } = global;
 
-declare let Ember: any;
-
 const rootEl = document.getElementById('root');
 
 const config = globalWindow.require(`${globalWindow.STORYBOOK_NAME}/config/environment`);
@@ -38,7 +38,7 @@ function render(options: OptionsArgs, el: HTMLElement) {
     .then((instance: any) => {
       instance.register(
         'component:story-mode',
-        Ember.Component.extend({
+        Component.extend({
           layout: template || options,
           ...context,
         })

app/html/README.md

@@ -19,6 +19,11 @@ npx sb init -t html
 
 For more information visit: [storybook.js.org](https://storybook.js.org)
 
+### Typescript
+
+`npx sb init` will select `.ts` starter stories if your `package.json` has typescript as a dependency. If starting a new project,
+run `npm init` and `npm install typescript --save-dev` before initializing storybook to get the typescript starter stories.
+
 ---
 
 Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.