Merge branch 'next' into future/base

CHANGELOG.md

@@ -1,3 +1,45 @@
+## 6.5.0-beta.4 (May 4, 2022)
+
+### Features
+
+- UI: Add a parent level toolbar exclusion key for tabs ([#18106](https://github.com/storybookjs/storybook/pull/18106))
+- Addon-a11y: Display a11y issues number in addon tab title ([#17983](https://github.com/storybookjs/storybook/pull/17983))
+
+### Bug Fixes
+
+- Addon-docs: Fix Canvas block CURRENT_SELECTION handling ([#18130](https://github.com/storybookjs/storybook/pull/18130))
+- Telemetry: Add safecheck for crash reports ([#18129](https://github.com/storybookjs/storybook/pull/18129))
+- Addon-a11y: Fix a11y params > element use ([#17989](https://github.com/storybookjs/storybook/pull/17989))
+
+## 6.5.0-beta.3 (May 4, 2022)
+
+### Bug Fixes
+
+- UI: Externalize `react-syntax-highlighter` from components ([#18127](https://github.com/storybookjs/storybook/pull/18127))
+
+## 6.5.0-beta.2 (May 2, 2022)
+
+### Features
+
+- Core: Add optional telemetry and crash reporting ([#18046](https://github.com/storybookjs/storybook/pull/18046))
+
+### Bug Fixes
+
+- Controls: Fix URL deserialization for argTypes with mapping ([#18124](https://github.com/storybookjs/storybook/pull/18124))
+- Core: Fix telemetry project root detection ([#18125](https://github.com/storybookjs/storybook/pull/18125))
+- React: Fix version detection for older versions of `react-dom` ([#18105](https://github.com/storybookjs/storybook/pull/18105))
+- CLI: Add non-monorepo testing tools to exclude lists ([#18092](https://github.com/storybookjs/storybook/pull/18092))
+
+### Maintenance
+
+- Examples: Update example to restore 6.4 auto-title behavior in UI ([#18109](https://github.com/storybookjs/storybook/pull/18109))
+- CLI: Remove git.io URL ([#18070](https://github.com/storybookjs/storybook/pull/18070))
+- UI: Make panel position a persistent preference ([#18036](https://github.com/storybookjs/storybook/pull/18036))
+
+### Dependency Upgrades
+
+- React: Fix jest-specific-snapshot dev dependency ([#18095](https://github.com/storybookjs/storybook/pull/18095))
+
 ## 6.5.0-beta.1 (April 28, 2022)
 
 ### Features

MIGRATION.md

@@ -313,6 +313,19 @@ This might be considered a breaking change. However, we feel justified to releas
 1. We consider it a bug in the initial auto-title implementation
 2. CSF3 and the auto-title feature are experimental, and we reserve the right to make breaking changes outside of semver (tho we try to avoid it)
 
+If you want to restore the old titles in the UI, you can customize your sidebar with the following code snippet in `.storybook/manager.js`:
+
+```js
+import { addons } from '@storybook/addons';
+import startCase from 'lodash/startCase';
+
+addons.setConfig({
+  sidebar: {
+    renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)),
+  },
+});
+```
+
 #### Auto-title redundant filename
 
 The heuristic failed in the common scenario in which each component gets its own directory, e.g. `atoms/Button/Button.stories.js`, which would result in the redundant title `Atoms/Button/Button`. Alternatively, `atoms/Button/index.stories.js` would result in `Atoms/Button/Index`.

__mocks__/fs-extra.js

@@ -15,6 +15,7 @@ function __setMockFiles(newMockFiles) {
 const readFile = async (filePath) => mockFiles[filePath];
 const readFileSync = (filePath = '') => mockFiles[filePath];
 const existsSync = (filePath) => !!mockFiles[filePath];
+const readJsonSync = (filePath = '') => JSON.parse(mockFiles[filePath]);
 const lstatSync = (filePath) => ({
   isFile: () => !!mockFiles[filePath],
 });
@@ -23,6 +24,7 @@ const lstatSync = (filePath) => ({
 fs.__setMockFiles = __setMockFiles;
 fs.readFile = readFile;
 fs.readFileSync = readFileSync;
+fs.readJsonSync = readJsonSync;
 fs.existsSync = existsSync;
 fs.lstatSync = lstatSync;
 

addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "6.5.0-beta.1",
+  "version": "6.5.0-beta.4",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
@@ -45,14 +45,14 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-beta.1",
-    "@storybook/api": "6.5.0-beta.1",
-    "@storybook/channels": "6.5.0-beta.1",
-    "@storybook/client-logger": "6.5.0-beta.1",
-    "@storybook/components": "6.5.0-beta.1",
-    "@storybook/core-events": "6.5.0-beta.1",
+    "@storybook/addons": "6.5.0-beta.4",
+    "@storybook/api": "6.5.0-beta.4",
+    "@storybook/channels": "6.5.0-beta.4",
+    "@storybook/client-logger": "6.5.0-beta.4",
+    "@storybook/components": "6.5.0-beta.4",
+    "@storybook/core-events": "6.5.0-beta.4",
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/theming": "6.5.0-beta.1",
+    "@storybook/theming": "6.5.0-beta.4",
     "axe-core": "^4.2.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -81,7 +81,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+  "gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Accessibility",

addons/a11y/src/a11yRunner.ts

@@ -15,11 +15,6 @@ let active = false;
 // Holds latest story we requested a run
 let activeStoryId: string | undefined;
 
-const getElement = () => {
-  const storyRoot = document.getElementById('story-root');
-  return storyRoot ? storyRoot.childNodes : document.getElementById('root');
-};
-
 /**
  * Handle A11yContext events.
  * Because the event are sent without manual check, we split calls
@@ -41,13 +36,14 @@ const run = async (storyId: string) => {
       channel.emit(EVENTS.RUNNING);
       const axe = (await import('axe-core')).default;
 
-      const { element = getElement(), config, options = {} } = input;
+      const { element = '#root', config, options = {} } = input;
+      const htmlElement = document.querySelector(element);
       axe.reset();
       if (config) {
         axe.configure(config);
       }
 
-      const result = await axe.run(element, options);
+      const result = await axe.run(htmlElement, options);
       // It's possible that we requested a new run on a different story.
       // Unfortunately, axe doesn't support a cancel method to abort current run.
       // We check if the story we run against is still the current one,

addons/a11y/src/components/A11YPanel.test.tsx

@@ -63,6 +63,7 @@ describe('A11YPanel', () => {
     mockedApi.useStorybookState.mockReset();
     mockedApi.useAddonState.mockReset();
 
+    mockedApi.useAddonState.mockImplementation((_, defaultState) => React.useState(defaultState));
     mockedApi.useChannel.mockReturnValue(jest.fn());
     mockedApi.useParameter.mockReturnValue({ manual: false });
     const state: Partial<api.State> = { storyId: 'jest' };

addons/a11y/src/components/A11yContext.test.tsx

@@ -53,11 +53,13 @@ describe('A11YPanel', () => {
   beforeEach(() => {
     mockedApi.useChannel.mockReset();
     mockedApi.useStorybookState.mockReset();
+    mockedApi.useAddonState.mockReset();
 
+    mockedApi.useAddonState.mockImplementation((_, defaultState) => React.useState(defaultState));
     mockedApi.useChannel.mockReturnValue(jest.fn());
-    const state: Partial<api.State> = { storyId };
+    const storyState: Partial<api.State> = { storyId };
     // Lazy to mock entire state
-    mockedApi.useStorybookState.mockReturnValue(state as any);
+    mockedApi.useStorybookState.mockReturnValue(storyState as any);
   });
 
   it('should render children', () => {

addons/a11y/src/components/A11yContext.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { themes, convert } from '@storybook/theming';
 import { Result } from 'axe-core';
-import { useChannel, useStorybookState } from '@storybook/api';
+import { useChannel, useStorybookState, useAddonState } from '@storybook/api';
 import { STORY_CHANGED, STORY_RENDERED } from '@storybook/core-events';
-import { EVENTS } from '../constants';
+import { ADDON_ID, EVENTS } from '../constants';
 
-interface Results {
+export interface Results {
   passes: Result[];
   violations: Result[];
   incomplete: Result[];
@@ -52,7 +52,7 @@ const defaultResult = {
 };
 
 export const A11yContextProvider: React.FC<A11yContextProviderProps> = ({ active, ...props }) => {
-  const [results, setResults] = React.useState<Results>(defaultResult);
+  const [results, setResults] = useAddonState<Results>(ADDON_ID, defaultResult);
   const [tab, setTab] = React.useState(0);
   const [highlighted, setHighlighted] = React.useState<string[]>([]);
   const { storyId } = useStorybookState();

addons/a11y/src/manager.test.tsx

@@ -0,0 +1,55 @@
+import { addons } from '@storybook/addons';
+import * as api from '@storybook/api';
+import { PANEL_ID } from './constants';
+import './manager';
+
+jest.mock('@storybook/api');
+jest.mock('@storybook/addons');
+const mockedApi = api as unknown as jest.Mocked<api.API>;
+mockedApi.getAddonState = jest.fn();
+const mockedAddons = addons as jest.Mocked<typeof addons>;
+const registrationImpl = mockedAddons.register.mock.calls[0][1];
+
+describe('A11yManager', () => {
+  it('should register the panels', () => {
+    // when
+    registrationImpl(mockedApi);
+
+    // then
+    expect(mockedAddons.add.mock.calls).toHaveLength(2);
+    expect(mockedAddons.add).toHaveBeenCalledWith(PANEL_ID, expect.anything());
+
+    const panel = mockedAddons.add.mock.calls
+      .map(([_, def]) => def)
+      .find(({ type }) => type === 'panel');
+    const tool = mockedAddons.add.mock.calls
+      .map(([_, def]) => def)
+      .find(({ type }) => type === 'tool');
+    expect(panel).toBeDefined();
+    expect(tool).toBeDefined();
+  });
+
+  it('should compute title with no issues', () => {
+    // given
+    mockedApi.getAddonState.mockImplementation(() => undefined);
+    registrationImpl(api as unknown as api.API);
+    const title = mockedAddons.add.mock.calls
+      .map(([_, def]) => def)
+      .find(({ type }) => type === 'panel').title as Function;
+
+    // when / then
+    expect(title()).toBe('Accessibility');
+  });
+
+  it('should compute title with issues', () => {
+    // given
+    mockedApi.getAddonState.mockImplementation(() => ({ violations: [{}], incomplete: [{}, {}] }));
+    registrationImpl(mockedApi);
+    const title = mockedAddons.add.mock.calls
+      .map(([_, def]) => def)
+      .find(({ type }) => type === 'panel').title as Function;
+
+    // when / then
+    expect(title()).toBe('Accessibility (3)');
+  });
+});

addons/a11y/src/manager.tsx

@@ -3,9 +3,9 @@ import { addons, types } from '@storybook/addons';
 import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
 import { VisionSimulator } from './components/VisionSimulator';
 import { A11YPanel } from './components/A11YPanel';
-import { A11yContextProvider } from './components/A11yContext';
+import { A11yContextProvider, Results } from './components/A11yContext';
 
-addons.register(ADDON_ID, () => {
+addons.register(ADDON_ID, (api) => {
   addons.add(PANEL_ID, {
     title: '',
     type: types.TOOL,
@@ -14,7 +14,13 @@ addons.register(ADDON_ID, () => {
   });
 
   addons.add(PANEL_ID, {
-    title: 'Accessibility',
+    title() {
+      const addonState: Results = api?.getAddonState(ADDON_ID);
+      const violationsNb = addonState?.violations?.length || 0;
+      const incompleteNb = addonState?.incomplete?.length || 0;
+      const totalNb = violationsNb + incompleteNb;
+      return totalNb !== 0 ? `Accessibility (${totalNb})` : 'Accessibility';
+    },
     type: types.PANEL,
     render: ({ active = true, key }) => (
       <A11yContextProvider key={key} active={active}>

addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "6.5.0-beta.1",
+  "version": "6.5.0-beta.4",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",
@@ -41,13 +41,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-beta.1",
-    "@storybook/api": "6.5.0-beta.1",
-    "@storybook/client-logger": "6.5.0-beta.1",
-    "@storybook/components": "6.5.0-beta.1",
-    "@storybook/core-events": "6.5.0-beta.1",
+    "@storybook/addons": "6.5.0-beta.4",
+    "@storybook/api": "6.5.0-beta.4",
+    "@storybook/client-logger": "6.5.0-beta.4",
+    "@storybook/components": "6.5.0-beta.4",
+    "@storybook/core-events": "6.5.0-beta.4",
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/theming": "6.5.0-beta.1",
+    "@storybook/theming": "6.5.0-beta.4",
     "core-js": "^3.8.2",
     "fast-deep-equal": "^3.1.3",
     "global": "^4.4.0",
@@ -80,7 +80,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+  "gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Actions",

addons/backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "6.5.0-beta.1",
+  "version": "6.5.0-beta.4",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",
@@ -45,13 +45,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-beta.1",
-    "@storybook/api": "6.5.0-beta.1",
-    "@storybook/client-logger": "6.5.0-beta.1",
-    "@storybook/components": "6.5.0-beta.1",
-    "@storybook/core-events": "6.5.0-beta.1",
+    "@storybook/addons": "6.5.0-beta.4",
+    "@storybook/api": "6.5.0-beta.4",
+    "@storybook/client-logger": "6.5.0-beta.4",
+    "@storybook/components": "6.5.0-beta.4",
+    "@storybook/core-events": "6.5.0-beta.4",
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/theming": "6.5.0-beta.1",
+    "@storybook/theming": "6.5.0-beta.4",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "memoizerific": "^1.11.3",
@@ -77,7 +77,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+  "gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Backgrounds",

addons/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "6.5.0-beta.1",
+  "version": "6.5.0-beta.4",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",
@@ -45,15 +45,15 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-beta.1",
-    "@storybook/api": "6.5.0-beta.1",
-    "@storybook/client-logger": "6.5.0-beta.1",
-    "@storybook/components": "6.5.0-beta.1",
-    "@storybook/core-common": "6.5.0-beta.1",
+    "@storybook/addons": "6.5.0-beta.4",
+    "@storybook/api": "6.5.0-beta.4",
+    "@storybook/client-logger": "6.5.0-beta.4",
+    "@storybook/components": "6.5.0-beta.4",
+    "@storybook/core-common": "6.5.0-beta.4",
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/node-logger": "6.5.0-beta.1",
-    "@storybook/store": "6.5.0-beta.1",
-    "@storybook/theming": "6.5.0-beta.1",
+    "@storybook/node-logger": "6.5.0-beta.4",
+    "@storybook/store": "6.5.0-beta.4",
+    "@storybook/theming": "6.5.0-beta.4",
     "core-js": "^3.8.2",
     "lodash": "^4.17.21",
     "ts-dedent": "^2.0.0"
@@ -73,7 +73,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+  "gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
   "sbmodern": "dist/modern/manager.js",
   "storybook": {
     "displayName": "Controls",