Skip to content

Commit

Permalink
Merge branch 'next' into revert-28479-revert/26884
Browse files Browse the repository at this point in the history
  • Loading branch information
kasperpeulen authored Dec 13, 2024
2 parents 1c0791e + d821e7f commit 72c0fab
Show file tree
Hide file tree
Showing 193 changed files with 2,545 additions and 924 deletions.
49 changes: 49 additions & 0 deletions CHANGELOG.prerelease.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,52 @@
## 8.5.0-alpha.22

- Addon Docs: Dynamically import rehype - [#29544](https://github.com/storybookjs/storybook/pull/29544), thanks @valentinpalkovic!
- Addon Test: Fix duplicate `test.include` patterns - [#30029](https://github.com/storybookjs/storybook/pull/30029), thanks @JReinhold!
- Addon Test: Fix environment variable for Vitest Storybook integration - [#30054](https://github.com/storybookjs/storybook/pull/30054), thanks @valentinpalkovic!
- Addon Test: Use local storybook binary instead - [#30021](https://github.com/storybookjs/storybook/pull/30021), thanks @kasperpeulen!
- Addon Test: Wait for 2 seconds before showing result mismatch warning - [#30002](https://github.com/storybookjs/storybook/pull/30002), thanks @ghengeveld!
- Angular: Support statsJson in angular schemas - [#29233](https://github.com/storybookjs/storybook/pull/29233), thanks @yannbf!
- Core: Fix `scrollIntoView` behavior and reimplement testing module time rendering - [#30044](https://github.com/storybookjs/storybook/pull/30044), thanks @ghengeveld!
- Docs: Add code snippet to addons panel - [#29253](https://github.com/storybookjs/storybook/pull/29253), thanks @larsrickert!
- Next.js: Fix webpack fsCache not working - [#29654](https://github.com/storybookjs/storybook/pull/29654), thanks @sentience!
- Nextjs-Vite: Add TS docgen support - [#29824](https://github.com/storybookjs/storybook/pull/29824), thanks @yannbf!
- Nextjs-Vite: Fix docgen types in main config - [#30042](https://github.com/storybookjs/storybook/pull/30042), thanks @yannbf!
- React: Fix RSC compatibility with addon-themes and hooks - [#26243](https://github.com/storybookjs/storybook/pull/26243), thanks @shilman!
- UI: Fix controls and parameters on tag-filtered stories - [#30038](https://github.com/storybookjs/storybook/pull/30038), thanks @shilman!

## 8.5.0-alpha.21

- Addon A11y: Add typesVersions support for TypeScript definitions in a11y package - [#30005](https://github.com/storybookjs/storybook/pull/30005), thanks @valentinpalkovic!
- Addon A11y: Refactor environment variable handling for Vitest integration - [#30022](https://github.com/storybookjs/storybook/pull/30022), thanks @valentinpalkovic!
- Addon A11y: Run the a11y automigration on postInstall - [#30004](https://github.com/storybookjs/storybook/pull/30004), thanks @kasperpeulen!
- Addon A11y: Update accessibility status handling in TestProviderRender - [#30027](https://github.com/storybookjs/storybook/pull/30027), thanks @valentinpalkovic!
- Addon Onboarding: Prebundle react-confetti - [#29996](https://github.com/storybookjs/storybook/pull/29996), thanks @yannbf!
- Addon Test: Correctly stop Storybook when Vitest closes - [#30012](https://github.com/storybookjs/storybook/pull/30012), thanks @JReinhold!
- Addon Test: Show sub test provider toggle state in main testing module - [#30019](https://github.com/storybookjs/storybook/pull/30019), thanks @ghengeveld!
- Addon Test: Wrap sub-paths exported with `require.resolve` - [#30026](https://github.com/storybookjs/storybook/pull/30026), thanks @ndelangen!
- Core: Fix bundling of React - [#30003](https://github.com/storybookjs/storybook/pull/30003), thanks @yannbf!

## 8.5.0-alpha.20

- Addon Test: Add `@vitest/coverage-v8` during postinstall if no coverage reporter is installed - [#29993](https://github.com/storybookjs/storybook/pull/29993), thanks @ghengeveld!
- Addon Test: Add support for previewHead - [#29808](https://github.com/storybookjs/storybook/pull/29808), thanks @ndelangen!
- Addon Test: Always run Vitest in watch mode internally - [#29749](https://github.com/storybookjs/storybook/pull/29749), thanks @JReinhold!
- Addon Test: Filter out falsy test results in TestProviderRender - [#30001](https://github.com/storybookjs/storybook/pull/30001), thanks @valentinpalkovic!
- Addon Test: Handle undefined storyId - [#29998](https://github.com/storybookjs/storybook/pull/29998), thanks @ghengeveld!
- Addon Test: Make component tests status row link to the story's tests panel - [#29992](https://github.com/storybookjs/storybook/pull/29992), thanks @ghengeveld!
- Addon Test: Merge viteFinal config into vitest config - [#29806](https://github.com/storybookjs/storybook/pull/29806), thanks @ndelangen!
- Addon Test: Prompt switch to `experimental-nextjs-vite` - [#29814](https://github.com/storybookjs/storybook/pull/29814), thanks @ndelangen!
- Addon Test: Use ProgressSpinner for stop button in Testing Module - [#29997](https://github.com/storybookjs/storybook/pull/29997), thanks @ghengeveld!

## 8.5.0-alpha.19

- Addon A11y: Create a11y test provider and revamp a11y addon - [#29643](https://github.com/storybookjs/storybook/pull/29643), thanks @valentinpalkovic!
- Addon Test: Fix indexing behavior - [#29836](https://github.com/storybookjs/storybook/pull/29836), thanks @yannbf!
- Addon Test: Fix run request while booting or restarting Vitest - [#29829](https://github.com/storybookjs/storybook/pull/29829), thanks @ghengeveld!
- Addon Test: Serve `staticDirs` with Vitest - [#29811](https://github.com/storybookjs/storybook/pull/29811), thanks @ghengeveld!
- RNW-Vite: Add tsconfig path aliases support - [#29953](https://github.com/storybookjs/storybook/pull/29953), thanks @shilman!
- RNW-Vite: Fix flow plugin including too many things - [#29952](https://github.com/storybookjs/storybook/pull/29952), thanks @dannyhw!

## 8.5.0-alpha.18

- Addon Test: Clarify message when `vitest` detects missing deps - [#29763](https://github.com/storybookjs/storybook/pull/29763), thanks @ndelangen!
Expand Down
25 changes: 22 additions & 3 deletions MIGRATION.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<h1>Migration</h1>

- [From version 8.4.x to 8.5.x](#from-version-84x-to-85x)
- [Added source code panel to docs](#added-source-code-panel-to-docs)
- [Addon-a11y: Component test integration](#addon-a11y-component-test-integration)
- [Addon-a11y: Deprecated `parameters.a11y.manual`](#addon-a11y-deprecated-parametersa11ymanual)
- [Indexing behavior of @storybook/experimental-addon-test is changed](#indexing-behavior-of-storybookexperimental-addon-test-is-changed)
Expand Down Expand Up @@ -425,14 +426,32 @@

## From version 8.4.x to 8.5.x

### Added source code panel to docs

Starting in 8.5, Storybook Docs (`@storybook/addon-docs`) automatically adds a new addon panel to stories that displays a source snippet beneath each story. This works similarly to the existing [source snippet doc block](https://storybook.js.org/docs/writing-docs/doc-blocks#source), but in the story view. It is intended to replace the [Storysource addon](https://storybook.js.org/addons/@storybook/addon-storysource).

If you wish to disable this panel globally, add the following line to your `.storybook/preview.js` project configuration. You can also selectively disable/enable at the story level.

```js
export default {
parameters: {
docs: {
codePanel: false,
},
},
};
```

### Addon-a11y: Component test integration

In Storybook 8.4, we introduced a new addon called [addon test](https://storybook.js.org/docs/writing-tests/test-addon). Powered by Vitest under the hood, this addon lets you watch, run, and debug your component tests directly in Storybook.
In Storybook 8.4, we introduced the [Test addon](https://storybook.js.org/docs/writing-tests/test-addon) (`@storybook/experimental-addon-test`). Powered by Vitest under the hood, this addon lets you watch, run, and debug your component tests directly in Storybook.

In Storybook 8.5, we revamped the [Accessibility addon](https://storybook.js.org/docs/writing-tests/accessibility-testing) (`@storybook/addon-a11y`) to integrate it with the component tests feature. This means you can now extend your component tests to include accessibility tests.

In Storybook 8.5, we revamped the Accessibility addon (`@storybook/addon-a11y`) to integrate it with the component tests feature. This means you can now extend your component tests to include accessibility tests. If you upgrade to Storybook 8.5 via `npx storybook@latest upgrade`, the Accessibility addon will be automatically configured to work with the component tests. However, if you're upgrading manually and you have the [addon test](https://storybook.js.org/docs/writing-tests/test-addon) installed, adjust your configuration as follows:
If you upgrade to Storybook 8.5 via `npx storybook@latest upgrade`, the Accessibility addon will be automatically configured to work with the component tests. However, if you're upgrading manually and you have the Test addon installed, adjust your configuration as follows:

```diff
// .storybook/vitest.config.ts
// .storybook/vitest.setup.ts
...
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';

Expand Down
2 changes: 1 addition & 1 deletion SECURITY.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,6 @@ In the event of a high-risk vulnerability, we may backport the security fixes to

## Reporting a Vulnerability

To report a vulnerability, you can reach out to the maintainers directly on Twitter: https://twitter.com/storybookjs
To report a vulnerability, you can reach out to the maintainers directly on Twitter: https://twitter.com/storybookjs or Bluesky: https://bsky.app/profile/storybook.js.org

When we fix a security issue, we will post a security advisory on Github/NPM, describe the change in the [release notes](https://github.com/storybookjs/storybook/releases), and also announce notify the community on [our Discord](https://discord.gg/storybook).
19 changes: 17 additions & 2 deletions code/addons/a11y/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
"version": "8.5.0-alpha.18",
"version": "8.5.0-alpha.22",
"description": "Test component compliance with web accessibility standards",
"keywords": [
"a11y",
Expand Down Expand Up @@ -38,11 +38,22 @@
},
"./manager": "./dist/manager.js",
"./register": "./dist/manager.js",
"./package.json": "./package.json"
"./package.json": "./package.json",
"./postinstall": "./dist/postinstall.js"
},
"main": "dist/index.js",
"module": "dist/index.mjs",
"types": "dist/index.d.ts",
"typesVersions": {
"*": {
"*": [
"dist/index.d.ts"
],
"preview": [
"dist/preview.d.ts"
]
}
},
"files": [
"dist/**/*",
"README.md",
Expand All @@ -64,6 +75,7 @@
"@storybook/global": "^5.0.0",
"@storybook/icons": "^1.2.12",
"@testing-library/react": "^14.0.0",
"execa": "^9.5.2",
"picocolors": "^1.1.0",
"pretty-format": "^29.7.0",
"react": "^18.2.0",
Expand All @@ -87,6 +99,9 @@
],
"previewEntries": [
"./src/preview.tsx"
],
"nodeEntries": [
"./src/postinstall.ts"
]
},
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
Expand Down
15 changes: 15 additions & 0 deletions code/addons/a11y/src/postinstall.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import type { PostinstallOptions } from '@storybook/cli/src/add';

// eslint-disable-next-line depend/ban-dependencies
import { execa } from 'execa';

const $ = execa({
preferLocal: true,
stdio: 'inherit',
// we stream the stderr to the console
reject: false,
});

export default async function postinstall(options: PostinstallOptions) {
await $`storybook automigrate addonA11yAddonTest ${options.yes ? '--yes' : ''}`;
}
24 changes: 8 additions & 16 deletions code/addons/a11y/src/utils.ts
Original file line number Diff line number Diff line change
@@ -1,25 +1,17 @@
export function getIsVitestStandaloneRun() {
try {
return process.env.VITEST_STORYBOOK === 'false';
} catch {
try {
// @ts-expect-error Suppress TypeScript warning about wrong setting. Doesn't matter, because we don't use tsc for bundling.
return import.meta.env.VITEST_STORYBOOK === 'false';
} catch (e) {
return false;
}
// @ts-expect-error Suppress TypeScript warning about wrong setting. Doesn't matter, because we don't use tsc for bundling.
return import.meta.env.VITEST_STORYBOOK === 'false';
} catch (e) {
return false;
}
}

export function getIsVitestRunning() {
try {
return process?.env.MODE === 'test';
} catch {
try {
// @ts-expect-error Suppress TypeScript warning about wrong setting. Doesn't matter, because we don't use tsc for bundling.
return import.meta.env.MODE === 'test';
} catch (e) {
return false;
}
// @ts-expect-error Suppress TypeScript warning about wrong setting. Doesn't matter, because we don't use tsc for bundling.
return import.meta.env.MODE === 'test';
} catch (e) {
return false;
}
}
2 changes: 1 addition & 1 deletion code/addons/actions/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
"version": "8.5.0-alpha.18",
"version": "8.5.0-alpha.22",
"description": "Get UI feedback when an action is performed on an interactive element",
"keywords": [
"storybook",
Expand Down
2 changes: 1 addition & 1 deletion code/addons/backgrounds/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-backgrounds",
"version": "8.5.0-alpha.18",
"version": "8.5.0-alpha.22",
"description": "Switch backgrounds to view components in different settings",
"keywords": [
"addon",
Expand Down
2 changes: 1 addition & 1 deletion code/addons/controls/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-controls",
"version": "8.5.0-alpha.18",
"version": "8.5.0-alpha.22",
"description": "Interact with component inputs dynamically in the Storybook UI",
"keywords": [
"addon",
Expand Down
15 changes: 12 additions & 3 deletions code/addons/docs/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-docs",
"version": "8.5.0-alpha.18",
"version": "8.5.0-alpha.22",
"description": "Document component usage and properties in Markdown",
"keywords": [
"addon",
Expand Down Expand Up @@ -71,7 +71,12 @@
"./angular": "./angular/index.js",
"./angular/index.js": "./angular/index.js",
"./web-components/index.js": "./web-components/index.js",
"./package.json": "./package.json"
"./package.json": "./package.json",
"./manager": {
"types": "./dist/manager.d.ts",
"import": "./dist/manager.mjs",
"require": "./dist/manager.js"
}
},
"main": "dist/index.js",
"module": "dist/index.mjs",
Expand Down Expand Up @@ -129,7 +134,11 @@
"./src/preview.ts",
"./src/blocks.ts",
"./src/shims/mdx-react-shim.ts",
"./src/mdx-loader.ts"
"./src/mdx-loader.ts",
"./src/manager.tsx"
],
"managerEntries": [
"./src/manager.tsx"
]
},
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
Expand Down
57 changes: 57 additions & 0 deletions code/addons/docs/src/manager.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import React from 'react';

import { AddonPanel, type SyntaxHighlighterFormatTypes } from 'storybook/internal/components';
import { ADDON_ID, PANEL_ID, PARAM_KEY, SNIPPET_RENDERED } from 'storybook/internal/docs-tools';
import { addons, types, useAddonState, useChannel } from 'storybook/internal/manager-api';

import { Source } from '@storybook/blocks';

addons.register(ADDON_ID, (api) => {
addons.add(PANEL_ID, {
title: 'Code',
type: types.PANEL,
paramKey: PARAM_KEY,
/**
* This code panel can be disabled by the user by adding this parameter:
*
* @example
*
* ```ts
* parameters: {
* docs: {
* codePanel: false,
* },
* },
* ```
*/
disabled: (parameters) => {
return (
!!parameters &&
typeof parameters[PARAM_KEY] === 'object' &&
parameters[PARAM_KEY].codePanel === false
);
},
match: ({ viewMode }) => viewMode === 'story',
render: ({ active }) => {
const [codeSnippet, setSourceCode] = useAddonState<{
source: string;
format: SyntaxHighlighterFormatTypes;
}>(ADDON_ID, {
source: '',
format: 'html',
});

useChannel({
[SNIPPET_RENDERED]: ({ source, format }) => {
setSourceCode({ source, format });
},
});

return (
<AddonPanel active={!!active}>
<Source code={codeSnippet.source} format={codeSnippet.format} dark />
</AddonPanel>
);
},
});
});
5 changes: 3 additions & 2 deletions code/addons/docs/src/plugins/mdx-plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ import { dirname, join } from 'node:path';
import type { Options } from 'storybook/internal/types';

import { createFilter } from '@rollup/pluginutils';
import rehypeExternalLinks from 'rehype-external-links';
import rehypeSlug from 'rehype-slug';
import type { Plugin } from 'vite';

import type { CompileOptions } from '../compiler';
Expand All @@ -24,6 +22,9 @@ export async function mdxPlugin(options: Options): Promise<Plugin> {
const presetOptions = await presets.apply<Record<string, any>>('options', {});
const mdxPluginOptions = presetOptions?.mdxPluginOptions as CompileOptions;

const rehypeSlug = (await import('rehype-slug')).default;
const rehypeExternalLinks = (await import('rehype-external-links')).default;

return {
name: 'storybook:mdx-plugin',
enforce: 'pre',
Expand Down
9 changes: 6 additions & 3 deletions code/addons/docs/src/preset.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,6 @@ import type { DocsOptions, Options, PresetProperty } from 'storybook/internal/ty

import type { CsfPluginOptions } from '@storybook/csf-plugin';

import rehypeExternalLinks from 'rehype-external-links';
import rehypeSlug from 'rehype-slug';

import type { CompileOptions } from './compiler';

/**
Expand Down Expand Up @@ -42,6 +39,9 @@ async function webpack(

const { csfPluginOptions = {}, mdxPluginOptions = {} } = options;

const rehypeSlug = (await import('rehype-slug')).default;
const rehypeExternalLinks = (await import('rehype-external-links')).default;

const mdxLoaderOptions: CompileOptions = await options.presets.apply('mdxLoaderOptions', {
...mdxPluginOptions,
mdxCompileOptions: {
Expand Down Expand Up @@ -175,6 +175,9 @@ export const viteFinal = async (config: any, options: Options) => {
const { plugins = [] } = config;
const { mdxPlugin } = await import('./plugins/mdx-plugin');

const rehypeSlug = (await import('rehype-slug')).default;
const rehypeExternalLinks = (await import('rehype-external-links')).default;

// Use the resolvedReact preset to alias react and react-dom to either the users version or the version shipped with addon-docs
const { react, reactDom, mdx } = await getResolvedReact(options);

Expand Down
23 changes: 23 additions & 0 deletions code/addons/docs/template/stories/sourcePanel/index.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
export default {
component: globalThis.Components.Button,
tags: ['autodocs'],
parameters: {
chromatic: { disable: true },
docs: {
codePanel: false,
},
},
};

export const One = { args: { label: 'One' } };

export const Two = { args: { label: 'Two' } };

export const WithSource = {
args: { label: 'Three' },
parameters: {
docs: {
codePanel: true,
},
},
};
Loading

0 comments on commit 72c0fab

Please sign in to comment.