Merge branch 'kasper/csf-factories' into kasper/base-factories

.nvmrc

@@ -1 +1,2 @@
-22.6.0
+22.13.1
+

.yarnrc.yml

@@ -8,4 +8,4 @@ nodeLinker: node-modules
 
 npmPublishAccess: public
 
-yarnPath: .yarn/releases/yarn-4.3.0.cjs
+yarnPath: .yarn/releases/yarn-4.6.0.cjs

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 8.5.2
+
+- Addon Test: Support Vitest 3 browser.test.instances field - [#30309](https://github.com/storybookjs/storybook/pull/30309), thanks @valentinpalkovic!
+- CLI: Corrected Next.js createScript for pnpm. - [#30304](https://github.com/storybookjs/storybook/pull/30304), thanks @zhyd1997!
+
 ## 8.5.1
 
 - Addon Test: Replace `interaction test` -> `component test` - [#30333](https://github.com/storybookjs/storybook/pull/30333), thanks @kylegach!

CHANGELOG.prerelease.md

@@ -1,3 +1,9 @@
+## 8.6.0-alpha.2
+
+- Addon Test: Support Vitest 3 browser.test.instances field - [#30309](https://github.com/storybookjs/storybook/pull/30309), thanks @valentinpalkovic!
+- Bun: Add support for text lock file - [#30160](https://github.com/storybookjs/storybook/pull/30160), thanks @Arctomachine!
+- CLI: Corrected Next.js createScript for pnpm. - [#30304](https://github.com/storybookjs/storybook/pull/30304), thanks @zhyd1997!
+
 ## 8.6.0-alpha.1
 
 - Addon Test: Replace `interaction test` -> `component test` - [#30333](https://github.com/storybookjs/storybook/pull/30333), thanks @kylegach!

MIGRATION.md

@@ -433,7 +433,7 @@
 
 Storybook now supports [Angular's experimental zoneless mode](https://angular.dev/guide/experimental/zoneless). This mode is intended to improve performance by removing Angular's zone.js dependency. To enable zoneless mode in your Angular Storybook, set the `experimentalZoneless` config in your `angular.json` file:
 
-````diff
+```diff
 {
   "projects": {
     "your-project": {

code/.yarnrc.yml

@@ -22,7 +22,6 @@ plugins:
   - path: ../.yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
     spec: '@yarnpkg/plugin-workspace-tools'
 
-# See https://github.com/nrwl/nx/issues/22177
 supportedArchitectures:
   cpu:
     - current
@@ -36,6 +35,4 @@ supportedArchitectures:
 unsafeHttpWhitelist:
   - localhost
 
-yarnPath: ../.yarn/releases/yarn-4.3.0.cjs
-# Sometimes you get a "The remote archive doesn't match the expected checksum" error, uncommenting this line will fix it
-# checksumBehavior: 'update'
+yarnPath: .yarn/releases/yarn-4.6.0.cjs

code/addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.6.0-alpha.1",
+  "version": "8.6.0-alpha.2",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",

code/addons/a11y/src/components/VisionSimulator.tsx

@@ -42,13 +42,13 @@ const getFilter = (filterName: string) => {
   return `url('#${filterName}')`;
 };
 
-const Hidden = styled.div(() => ({
+const Hidden = styled.div({
   '&, & svg': {
     position: 'absolute',
     width: 0,
     height: 0,
   },
-}));
+});
 
 const ColorIcon = styled.span<{ filter: string }>(
   {

code/addons/a11y/src/index.ts

@@ -4,5 +4,6 @@ import * as addonAnnotations from './preview';
 
 export { PARAM_KEY } from './constants';
 export * from './params';
+export type { A11yParameters } from './types';
 
 export default () => definePreview(addonAnnotations);

code/addons/a11y/src/params.ts

@@ -1,4 +1,4 @@
-import type { ElementContext, ImpactValue, RunOptions, Spec } from 'axe-core';
+import type { ElementContext, RunOptions, Spec } from 'axe-core';
 
 export interface Setup {
   element?: ElementContext;

code/addons/a11y/src/types.ts

@@ -1,3 +1,49 @@
-import type { AxeResults } from 'axe-core';
+import type { AxeResults, ElementContext, RunOptions, Spec } from 'axe-core';
 
 export type A11YReport = AxeResults | { error: Error };
+
+export interface A11yParameters {
+  /**
+   * Accessibility configuration
+   *
+   * @see https://storybook.js.org/docs/writing-tests/accessibility-testing
+   */
+  a11y?: {
+    /** Manual configuration for specific elements */
+    element?: ElementContext;
+
+    /**
+     * Configuration for the accessibility rules
+     *
+     * @see https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure
+     */
+    config?: Spec;
+
+    /**
+     * Options for the accessibility checks To learn more about the available options,
+     *
+     * @see https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter
+     */
+    options?: RunOptions;
+
+    /** Remove the addon panel and disable the addon's behavior */
+    disable?: boolean;
+  };
+}
+
+export interface A11yGlobals {
+  /**
+   * Accessibility configuration
+   *
+   * @see https://storybook.js.org/docs/writing-tests/accessibility-testing
+   */
+  a11y: {
+    /**
+     * Prevent the addon from executing automated accessibility checks upon visiting a story. You
+     * can still trigger the checks from the addon panel.
+     *
+     * @see https://storybook.js.org/docs/writing-tests/accessibility-testing#turn-off-automated-a11y-tests
+     */
+    manual?: boolean;
+  };
+}

code/addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "8.6.0-alpha.1",
+  "version": "8.6.0-alpha.2",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",

code/addons/actions/src/index.ts

@@ -7,3 +7,5 @@ export * from './models';
 export * from './runtime';
 
 export default () => definePreview(addonAnnotations);
+
+export type { ActionsParameters } from './types';

code/addons/actions/src/types.ts

@@ -0,0 +1,38 @@
+export interface ActionsParameters {
+  /**
+   * Actions configuration
+   *
+   * @see https://storybook.js.org/docs/essentials/actions#parameters
+   */
+  actions: {
+    /**
+     * Create actions for each arg that matches the regex. (**NOT recommended, see below**)
+     *
+     * This is quite useful when your component has dozens (or hundreds) of methods and you do not
+     * want to manually apply the fn utility for each of those methods. However, this is not the
+     * recommended way of writing actions. That's because automatically inferred args are not
+     * available as spies in your play function. If you use argTypesRegex and your stories have play
+     * functions, you will need to also define args with the fn utility to test them in your play
+     * function.
+     *
+     * @example `argTypesRegex: '^on.*'`
+     */
+    argTypesRegex?: string;
+
+    /** Remove the addon panel and disable the addon's behavior */
+    disable?: boolean;
+
+    /**
+     * Binds a standard HTML event handler to the outermost HTML element rendered by your component
+     * and triggers an action when the event is called for a given selector. The format is
+     * `<eventname> <selector>`. The selector is optional; it defaults to all elements.
+     *
+     * **To enable this feature, you must use the `withActions` decorator.**
+     *
+     * @example `handles: ['mouseover', 'click .btn']`
+     *
+     * @see https://storybook.js.org/docs/essentials/actions#action-event-handlers
+     */
+    handles?: string[];
+  };
+}

code/addons/backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "8.6.0-alpha.1",
+  "version": "8.6.0-alpha.2",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",

code/addons/backgrounds/src/index.ts

@@ -3,3 +3,5 @@ import { definePreview } from 'storybook/internal/preview-api';
 import * as addonAnnotations from './preview';
 
 export default () => definePreview(addonAnnotations);
+
+export type { BackgroundsParameters, BackgroundsGlobals } from './types';

code/addons/backgrounds/src/types.ts

@@ -21,3 +21,33 @@ export interface Config {
 
 export type GlobalState = { value: string | undefined; grid: boolean };
 export type GlobalStateUpdate = Partial<GlobalState>;
+
+export interface BackgroundsParameters {
+  /**
+   * Backgrounds configuration
+   *
+   * @see https://storybook.js.org/docs/essentials/backgrounds#parameters
+   */
+  backgrounds: {
+    /** Default background color */
+    default?: string;
+
+    /** Remove the addon panel and disable the addon's behavior */
+    disable?: boolean;
+
+    /** Configuration for the background grid */
+    grid?: Partial<GridConfig>;
+
+    /** Available background colors */
+    values?: Array<Background>;
+  };
+}
+
+export interface BackgroundsGlobals {
+  /**
+   * Backgrounds configuration
+   *
+   * @see https://storybook.js.org/docs/essentials/backgrounds#globals
+   */
+  backgrounds: GlobalState;
+}

code/addons/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "8.6.0-alpha.1",
+  "version": "8.6.0-alpha.2",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",

code/addons/controls/src/index.ts

@@ -3,3 +3,5 @@ import { definePreview } from 'storybook/internal/preview-api';
 export { PARAM_KEY } from './constants';
 
 export default () => definePreview({});
+
+export type { ControlsParameters } from './types';

code/addons/controls/src/types.ts

@@ -0,0 +1,37 @@
+export interface ControlsParameters {
+  /**
+   * Controls configuration
+   *
+   * @see https://storybook.js.org/docs/essentials/controls#parameters-1
+   */
+  controls: {
+    /** Remove the addon panel and disable the addon's behavior */
+    disable?: boolean;
+
+    /** Disable the ability to create or edit stories from the Controls panel */
+    disableSaveFromUI?: boolean;
+
+    /** Exclude specific properties from the Controls panel */
+    exclude?: string[] | RegExp;
+
+    /**
+     * Show the full documentation for each property in the Controls addon panel, including the
+     * description and default value.
+     */
+    expanded?: boolean;
+
+    /** Exclude only specific properties in the Controls panel */
+    include?: string[] | RegExp;
+
+    /**
+     * Preset color swatches for the color picker control
+     *
+     * @example PresetColors: [{ color: '#ff4785', title: 'Coral' }, 'rgba(0, 159, 183, 1)',
+     * '#fe4a49']
+     */
+    presetColors?: Array<string | { color: string; title?: string }>;
+
+    /** Controls sorting order */
+    sort?: 'none' | 'alpha' | 'requiredFirst';
+  };
+}

code/addons/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "8.6.0-alpha.1",
+  "version": "8.6.0-alpha.2",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",

code/addons/docs/src/index.ts

@@ -4,5 +4,6 @@ import * as addonAnnotations from './preview';
 
 export * from '@storybook/blocks';
 export { DocsRenderer } from './DocsRenderer';
+export type { DocsParameters } from './types';
 
 export default () => definePreview(addonAnnotations);