Merge branch 'next' into candrepa1/fix-ariaControls-accesibility

Author: candrepa1

code/addons/a11y/src/a11yRunner.ts

@@ -56,7 +56,7 @@ export const run = async (input: A11yParameters = DEFAULT_PARAMETERS, storyId: s
 
   const context: ContextSpec = {
     include: document?.body,
-    exclude: ['.sb-wrapper', '#storybook-docs'], // Internal Storybook elements that are always in the document
+    exclude: ['.sb-wrapper', '#storybook-docs', '#storybook-highlights-root'], // Internal Storybook elements that are always in the document
   };
 
   if (input.context) {
@@ -93,6 +93,11 @@ export const run = async (input: A11yParameters = DEFAULT_PARAMETERS, storyId: s
   axe.configure(configWithDefault);
 
   return new Promise<AxeResults>((resolve, reject) => {
+    const highlightsRoot = document?.getElementById('storybook-highlights-root');
+    if (highlightsRoot) {
+      highlightsRoot.style.display = 'none';
+    }
+
     const task = async () => {
       try {
         const result = await axe.run(context, options);
@@ -108,6 +113,10 @@ export const run = async (input: A11yParameters = DEFAULT_PARAMETERS, storyId: s
     if (!isRunning) {
       runNext();
     }
+
+    if (highlightsRoot) {
+      highlightsRoot.style.display = '';
+    }
   });
 };
 

code/core/src/common/satellite-addons.ts

@@ -7,4 +7,11 @@ export default [
   '@storybook/addon-coverage',
   '@storybook/addon-webpack5-compiler-babel',
   '@storybook/addon-webpack5-compiler-swc',
+  // Storybook for React Native related packages
+  // TODO: For Storybook 10, we should check about possible automigrations
+  '@storybook/addon-ondevice-actions',
+  '@storybook/addon-ondevice-backgrounds',
+  '@storybook/addon-ondevice-controls',
+  '@storybook/addon-ondevice-notes',
+  '@storybook/react-native',
 ];

code/core/src/highlight/useHighlights.ts

@@ -1,3 +1,5 @@
+/// <reference path="./typings.d.ts" />
+
 /* eslint-env browser */
 import type { Channel } from 'storybook/internal/channels';
 import { STORY_RENDER_PHASE_CHANGED } from 'storybook/internal/core-events';

code/core/src/manager-api/lib/addons.ts

@@ -21,7 +21,8 @@ import { global } from '@storybook/global';
 import type { API } from '../root';
 import { mockChannel } from './storybook-channel-mock';
 
-export { Addon_Type as Addon, Addon_TypesEnum as types };
+export type { Addon_Type as Addon };
+export { Addon_TypesEnum as types };
 
 export function isSupportedType(type: Addon_Types): boolean {
   return !!Object.values(Addon_TypesEnum).find((typeVal) => typeVal === type);

code/core/src/measure/box-model/labels.ts

@@ -1,3 +1,5 @@
+import type { ElementMeasurements, FloatingAlignment } from '../util-types';
+
 type LabelType = 'margin' | 'padding' | 'border' | 'content';
 type LabelPosition = 'top' | 'right' | 'bottom' | 'left' | 'center';
 type Direction = 'top' | 'right' | 'bottom' | 'left';

code/core/src/measure/box-model/visualizer.ts

@@ -1,6 +1,12 @@
 /** Based on https://gist.github.com/awestbro/e668c12662ad354f02a413205b65fce7 */
 import { global } from '@storybook/global';
 
+import type {
+  Dimensions,
+  ElementMeasurements,
+  Extremities,
+  FloatingAlignment,
+} from '../util-types';
 import { draw } from './canvas';
 import type { Label, LabelStack } from './labels';
 import { labelStacks } from './labels';

code/core/src/measure/typings.d.ts renamed to code/core/src/measure/util-types.ts

@@ -1,25 +1,25 @@
-interface Margin {
+export interface Margin {
   top: number;
   bottom: number;
   left: number;
   right: number;
 }
 
-interface Padding {
+export interface Padding {
   top: number;
   bottom: number;
   left: number;
   right: number;
 }
 
-interface Border {
+export interface Border {
   top: number;
   bottom: number;
   left: number;
   right: number;
 }
 
-interface Dimensions {
+export interface Dimensions {
   margin: Margin;
   padding: Padding;
   border: Border;
@@ -31,19 +31,19 @@ interface Dimensions {
   right: number;
 }
 
-interface Extremities {
+export interface Extremities {
   top: number;
   bottom: number;
   left: number;
   right: number;
 }
 
-interface FloatingAlignment {
+export interface FloatingAlignment {
   x: 'left' | 'right';
   y: 'top' | 'bottom';
 }
 
-interface ElementMeasurements extends Dimensions {
+export interface ElementMeasurements extends Dimensions {
   extremities: Extremities;
   floatingAlignment: FloatingAlignment;
 }

code/core/src/telemetry/package-json.ts

@@ -21,9 +21,13 @@ export const getActualPackageVersion = async (packageName: string) => {
 };
 
 export const getActualPackageJson = async (packageName: string) => {
-  const resolvedPackageJson = require.resolve(join(packageName, 'package.json'), {
-    paths: [process.cwd()],
-  });
-  const packageJson = JSON.parse(await readFile(resolvedPackageJson, { encoding: 'utf8' }));
-  return packageJson;
+  try {
+    const resolvedPackageJson = require.resolve(join(packageName, 'package.json'), {
+      paths: [process.cwd()],
+    });
+    const packageJson = JSON.parse(await readFile(resolvedPackageJson, { encoding: 'utf8' }));
+    return packageJson;
+  } catch (err) {
+    return null;
+  }
 };

code/core/src/test/expect.ts

@@ -14,6 +14,7 @@ import {
   JestAsymmetricMatchers,
   JestChaiExpect,
   JestExtend,
+  customMatchers,
   getState,
   setState,
 } from '@vitest/expect';
@@ -78,6 +79,8 @@ export function createExpect() {
     return assert;
   };
 
+  expect.extend(customMatchers);
+
   // @ts-ignore tsup borks here for some reason
   expect.unreachable = (message?: string): never => {
     chai.assert.fail(`expected${message ? ` "${message}" ` : ' '}not to be reached`);

code/frameworks/nextjs/src/babel/loader.ts

@@ -3,7 +3,15 @@ import type { Options } from 'storybook/internal/types';
 
 import { getVirtualModules } from '@storybook/builder-webpack5';
 
-export const configureBabelLoader = async (baseConfig: any, options: Options) => {
+import type { NextConfig } from 'next';
+
+import { getNodeModulesExcludeRegex } from '../utils';
+
+export const configureBabelLoader = async (
+  baseConfig: any,
+  options: Options,
+  nextConfig: NextConfig
+) => {
   const { virtualModules } = await getVirtualModules(options);
 
   const babelOptions = await options.presets.apply('babel', {}, options);
@@ -23,7 +31,10 @@ export const configureBabelLoader = async (baseConfig: any, options: Options) =>
         },
       ],
       include: [getProjectRoot()],
-      exclude: [/node_modules/, ...Object.keys(virtualModules)],
+      exclude: [
+        getNodeModulesExcludeRegex(nextConfig.transpilePackages ?? []),
+        ...Object.keys(virtualModules),
+      ],
     },
   ];
 };