Merge branch 'next' into pr/18122

storybookjs · Jun 27, 2022 · 787fd9b · 787fd9b
2 parents d42a59a + ad3e6f0
commit 787fd9b
Show file tree

Hide file tree

Showing 153 changed files with 2,596 additions and 1,073 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -277,9 +277,9 @@ jobs:
       - run:
           name: run e2e tests cra
           command: yarn test:e2e-framework --pnp cra
-      - run:
-          name: run e2e tests vue
-          command: yarn test:e2e-framework --pnp sfcVue
+      # - run:
+      #     name: run e2e tests vue
+      #     command: yarn test:e2e-framework --pnp sfcVue
       - run:
           name: prep artifacts
           when: always

diff --git a/MIGRATION.md b/MIGRATION.md
@@ -365,6 +365,7 @@ In 6.5, the final titles would be:
 - `NoTitle.stories.js` => `Custom/NoTitle`
 - `Title.stories.js` => `Custom/Bar`
 
+<!-- markdown-link-check-disable -->
 ## From version 6.3.x to 6.4.0
 
 ### Automigrate
@@ -2908,3 +2909,4 @@ If you **are** using these addons, it takes two steps to migrate:
   import { action } from '@storybook/addon-actions';
   import { linkTo } from '@storybook/addon-links';
   ```
+<!-- markdown-link-check-enable -->
diff --git a/README.md b/README.md
@@ -51,8 +51,8 @@ It allows you to browse a component library, view the different states of each c
 
 <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.svg" /></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.svg" /></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=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>
 </p>
 
 ## Table of contents
@@ -92,19 +92,19 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
 
 ### Supported Frameworks
 
-| Framework                                                      | Demo                                                                                        |                                                                                                         |
-| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
-| [React](app/react)                                             | [v6.4.x](https://storybookjs.netlify.com/official-storybook/?path=/story/*)                 | [![React](https://img.shields.io/npm/dm/@storybook/react.svg)](app/react)                               |
-| [Vue](app/vue)                                                 | [v6.4.x](https://storybookjs.netlify.com/vue-kitchen-sink/)                                 | [![Vue](https://img.shields.io/npm/dm/@storybook/vue.svg)](app/vue)                                     |
-| [Angular](app/angular)                                         | [v6.4.x](https://storybookjs.netlify.com/angular-cli/)                                      | [![Angular](https://img.shields.io/npm/dm/@storybook/angular.svg)](app/angular)                         |
-| [Web components](app/web-components)                           | [v6.4.x](https://storybookjs.netlify.com/web-components-kitchen-sink/)                      | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components.svg)](app/web-components)            |
-| [React Native](https://github.com/storybookjs/react-native)    | -                                                                                           | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native.svg)](https://github.com/storybookjs/react-native)          |
-| [HTML](app/html)                                               | [v6.4.x](https://storybookjs.netlify.com/html-kitchen-sink/)                                | [![HTML](https://img.shields.io/npm/dm/@storybook/html.svg)](app/html)                                  |
-| [Ember](app/ember)                                             | [v6.4.x](https://storybookjs.netlify.com/ember-cli/)                                        | [![Ember](https://img.shields.io/npm/dm/@storybook/ember.svg)](app/ember)                               |
-| [Svelte](app/svelte)                                           | [v6.4.x](https://storybookjs.netlify.com/svelte-kitchen-sink/)                              | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte.svg)](app/svelte)                            |
-| [Preact](app/preact)                                           | [v6.4.x](https://storybookjs.netlify.com/preact-kitchen-sink/)                              | [![Preact](https://img.shields.io/npm/dm/@storybook/preact.svg)](app/preact)                            |
-| [Marionette.js](https://github.com/storybookjs/marionette)     | -                                                                                           | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette.svg)](https://github.com/storybookjs/marionette)             |
-| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [v6.4.x](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [![Native](https://img.shields.io/npm/dm/@storybook/native.svg)](https://github.com/storybookjs/native) |
+| Framework                                                      | Demo                                                                                                                                                                                               |                                                                                                                                                      |
+| -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [React](app/react)                                             | [![Storybook demo](https://img.shields.io/npm/v/@storybook/react/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/official-storybook/?path=/story/*)                  | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](app/react)                                                    |
+| [Vue](app/vue)                                                 | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/vue-kitchen-sink/)                                    | [![Vue](https://img.shields.io/npm/dm/@storybook/vue?style=flat-square&color=eee)](app/vue)                                                        |
+| [Angular](app/angular)                                         | [![Storybook demo](https://img.shields.io/npm/v/@storybook/angular/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/angular-cli/)                                     | [![Angular](https://img.shields.io/npm/dm/@storybook/angular?style=flat-square&color=eee)](app/angular)                                            |
+| [Web components](app/web-components)                           | [![Storybook demo](https://img.shields.io/npm/v/@storybook/web-components/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/web-components-kitchen-sink/)              | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components?style=flat-square&color=eee)](app/web-components)                               |
+| [React Native](https://github.com/storybookjs/react-native)    | -                                                                                                                                                                                                  | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native?style=flat-square&color=eee)](https://github.com/storybookjs/react-native)  |
+| [HTML](app/html)                                               | [![Storybook demo](https://img.shields.io/npm/v/@storybook/html/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/html-kitchen-sink/)                                  | [![HTML](https://img.shields.io/npm/dm/@storybook/html?style=flat-square&color=eee)](app/html)                                                     |
+| [Ember](app/ember)                                             | [![Storybook demo](https://img.shields.io/npm/v/@storybook/ember/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/ember-cli/)                                         | [![Ember](https://img.shields.io/npm/dm/@storybook/ember?style=flat-square&color=eee)](app/ember)                                                  |
+| [Svelte](app/svelte)                                           | [![Storybook demo](https://img.shields.io/npm/v/@storybook/svelte/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/svelte-kitchen-sink/)                              | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte?style=flat-square&color=eee)](app/svelte)                                               |
+| [Preact](app/preact)                                           | [![Storybook demo](https://img.shields.io/npm/v/@storybook/preact/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/preact-kitchen-sink/)                              | [![Preact](https://img.shields.io/npm/dm/@storybook/preact?style=flat-square&color=eee)](app/preact)                                               |
+| [Marionette.js](https://github.com/storybookjs/marionette)     | -                                                                                                                                                                                                  | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette?style=flat-square&color=eee)](https://github.com/storybookjs/marionette)     |
+| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/native/latest?style=flat-square&color=blue&label)](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [![Native](https://img.shields.io/npm/dm/@storybook/native?style=flat-square&color=eee)](https://github.com/storybookjs/native)                    |
 
 ### Sub Projects
 

diff --git a/RELEASES.md b/RELEASES.md
@@ -81,12 +81,11 @@ there gathering upvotes and "me too" comments. We need a way to make sure that
 these bugs get addressed.
 
 For every non-PATCH release, we nominate a small number of bugs that must be
-addressed before a release can go out by adding them to the milestone. For example, here's a list of blocking bugs [for the 3.2 milestone](https://github.com/storybookjs/storybook/milestone/3).
+addressed before a release can go out by adding them to the milestone. For example, here's a list of blocking bugs [for the 6.5 milestone](https://github.com/storybookjs/storybook/milestone/75).
 
 Adding bugs to the milestone helps people looking for good ways to contribute,
 or to understand what is blocking the release so they can actually do something
-about it. Discussion about which bugs are critical happens in the `#maintenance`
-channel [in our Slack](https://now-examples-slackin-rrirkqohko.now.sh/) [![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)
+about it. Discussion about which bugs are critical happens in the [`#maintenance` channel](https://discord.com/channels/486522875931656193/490070912448724992) in our Discord Server
 
 If you're experiencing a bug, the best way to make sure that it gets attention
 is to upvote it by adding a "thumbs-up" reaction in Github. This way important

diff --git a/SECURITY.md b/SECURITY.md
@@ -2,9 +2,9 @@
 
 ## Supported Versions
 
-| Version    | Supported          |
-| ---------- | ------------------ |
-| 6.3, 6.4   | :white_check_mark: |
+| Version         | Supported          |
+| --------------- | ------------------ |
+| 6.3, 6.4, 6.5   | :white_check_mark: |
 
 ## Reporting a Vulnerability
 

diff --git a/addons/a11y/src/components/VisionSimulator.test.tsx b/addons/a11y/src/components/VisionSimulator.test.tsx
@@ -30,7 +30,7 @@ describe('Vision Simulator', () => {
     await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
   });
 
-  it('should display tooltip on click', async () => {
+  it.skip('should display tooltip on click', async () => {
     // given
     render(<ThemedVisionSimulator />);
     await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
@@ -45,7 +45,7 @@ describe('Vision Simulator', () => {
     );
   });
 
-  it('should set filter', async () => {
+  it.skip('should set filter', async () => {
     // given
     render(<ThemedVisionSimulator />);
     await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());

diff --git a/addons/docs/package.json b/addons/docs/package.json
@@ -66,7 +66,7 @@
     "@storybook/core-events": "6.5.0-rc.1",
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
     "@storybook/docs-tools": "6.5.0-rc.1",
-    "@storybook/mdx1-csf": "canary",
+    "@storybook/mdx1-csf": "^0.0.1",
     "@storybook/node-logger": "6.5.0-rc.1",
     "@storybook/postinstall": "6.5.0-rc.1",
     "@storybook/preview-web": "6.5.0-rc.1",
@@ -86,11 +86,11 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
-    "@storybook/mdx2-csf": "canary",
+    "@storybook/mdx2-csf": "^0.0.3",
     "@types/util-deprecate": "^1.0.0"
   },
   "peerDependencies": {
-    "@storybook/mdx2-csf": "*",
+    "@storybook/mdx2-csf": "^0.0.3",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },

diff --git a/addons/interactions/package.json b/addons/interactions/package.json
@@ -59,7 +59,7 @@
   },
   "devDependencies": {
     "@storybook/jest": "^0.0.5",
-    "@storybook/testing-library": "^0.0.7",
+    "@storybook/testing-library": "0.0.14-next.0",
     "formik": "^2.2.9"
   },
   "peerDependencies": {

diff --git a/addons/interactions/src/Panel.stories.tsx b/addons/interactions/src/Panel.stories.tsx
@@ -4,7 +4,7 @@ import { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 import { CallStates } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
 
-import { getCall } from './mocks';
+import { getCalls, getInteractions } from './mocks';
 import { AddonPanelPure } from './Panel';
 import SubnavStories from './components/Subnav/Subnav.stories';
 
@@ -20,6 +20,8 @@ const StyledWrapper = styled.div(({ theme }) => ({
   overflow: 'auto',
 }));
 
+const interactions = getInteractions(CallStates.DONE);
+
 export default {
   title: 'Addons/Interactions/Panel',
   component: AddonPanelPure,
@@ -34,10 +36,10 @@ export default {
     layout: 'fullscreen',
   },
   args: {
-    calls: new Map(),
+    calls: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])),
     controls: SubnavStories.args.controls,
     controlStates: SubnavStories.args.controlStates,
-    interactions: [getCall(CallStates.DONE)],
+    interactions,
     fileName: 'addon-interactions.stories.tsx',
     hasException: false,
     isPlaying: false,
@@ -52,14 +54,14 @@ type Story = ComponentStoryObj<typeof AddonPanelPure>;
 
 export const Passing: Story = {
   args: {
-    interactions: [getCall(CallStates.DONE)],
+    interactions: getInteractions(CallStates.DONE),
   },
 };
 
 export const Paused: Story = {
   args: {
     isPlaying: true,
-    interactions: [getCall(CallStates.WAITING)],
+    interactions: getInteractions(CallStates.WAITING),
     controlStates: {
       debugger: true,
       start: false,
@@ -68,20 +70,21 @@ export const Paused: Story = {
       next: true,
       end: true,
     },
+    pausedAt: interactions[interactions.length - 1].id,
   },
 };
 
 export const Playing: Story = {
   args: {
     isPlaying: true,
-    interactions: [getCall(CallStates.ACTIVE)],
+    interactions: getInteractions(CallStates.ACTIVE),
   },
 };
 
 export const Failed: Story = {
   args: {
     hasException: true,
-    interactions: [getCall(CallStates.ERROR)],
+    interactions: getInteractions(CallStates.ERROR),
   },
 };