Skip to content

Commit

Permalink
Merge branch 'next' into r19-type-compat
Browse files Browse the repository at this point in the history
  • Loading branch information
yannbf authored Dec 19, 2024
2 parents e821e70 + 3d2eaaf commit a1f61f5
Show file tree
Hide file tree
Showing 235 changed files with 3,446 additions and 1,483 deletions.
2 changes: 2 additions & 0 deletions .github/workflows/tests-unit.yml
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ jobs:
runs-on: ${{ matrix.os }}
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 2
- name: Set node version
uses: actions/setup-node@v4
with:
Expand Down
54 changes: 54 additions & 0 deletions CHANGELOG.prerelease.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,57 @@
## 8.5.0-beta.3

- Addon A11y: Fix skipped status handling in Testing Module - [#30077](https://github.com/storybookjs/storybook/pull/30077), thanks @valentinpalkovic!
- Core: Float context menu button on top of story titles in sidebar - [#30080](https://github.com/storybookjs/storybook/pull/30080), thanks @ghengeveld!
- Onboarding: Replace `react-confetti` with `@neoconfetti/react` - [#30098](https://github.com/storybookjs/storybook/pull/30098), thanks @ndelangen!

## 8.5.0-beta.2

- Addon Test: Clear coverage data when starting or watching - [#30072](https://github.com/storybookjs/storybook/pull/30072), thanks @ghengeveld!
- Addon Test: Improve error message on missing coverage package - [#30088](https://github.com/storybookjs/storybook/pull/30088), thanks @JReinhold!
- UI: Fix test provider event handling on startup - [#30083](https://github.com/storybookjs/storybook/pull/30083), thanks @ghengeveld!
- UI: Keep failing stories in the sidebar, disregarding filters - [#30086](https://github.com/storybookjs/storybook/pull/30086), thanks @JReinhold!

## 8.5.0-beta.1

- Addon A11y: Add conditional rendering for a11y violation number in Testing Module - [#30073](https://github.com/storybookjs/storybook/pull/30073), thanks @valentinpalkovic!
- Addon A11y: Remove warnings API - [#30049](https://github.com/storybookjs/storybook/pull/30049), thanks @kasperpeulen!
- Addon A11y: Show errors of axe properly - [#30050](https://github.com/storybookjs/storybook/pull/30050), thanks @kasperpeulen!
- Addon Test: Fix printing null% for coverage - [#30061](https://github.com/storybookjs/storybook/pull/30061), thanks @ghengeveld!
- Telemetry: Add metadata distinguishing "apps" from "design systems" - [#30070](https://github.com/storybookjs/storybook/pull/30070), thanks @tmeasday!

## 8.5.0-beta.0

- Automigration: Improve setup file transformation and version range handling for a11y migration - [#30060](https://github.com/storybookjs/storybook/pull/30060), thanks @valentinpalkovic!
- Next.js: Support v15.1.1 - [#30068](https://github.com/storybookjs/storybook/pull/30068), thanks @valentinpalkovic!

## 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!
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).
5 changes: 1 addition & 4 deletions code/.storybook/preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -358,9 +358,6 @@ export const parameters = {
opacity: 0.4,
},
},
a11y: {
warnings: ['minor', 'moderate', 'serious', 'critical'],
},
};

export const tags = ['test', 'vitest'];
export const tags = ['test', 'vitest', '!a11ytest'];
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.20",
"version": "8.5.0-beta.3",
"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
6 changes: 5 additions & 1 deletion code/addons/a11y/src/components/A11YPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,11 @@ export const A11YPanel: React.FC = () => {
<>
The accessibility scan encountered an error.
<br />
{typeof error === 'string' ? error : JSON.stringify(error)}
{typeof error === 'string'
? error
: error instanceof Error
? error.toString()
: JSON.stringify(error)}
</>
)}
</Centered>
Expand Down
3 changes: 0 additions & 3 deletions code/addons/a11y/src/params.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,11 @@ export interface Setup {
options: RunOptions;
}

type Impact = NonNullable<ImpactValue>;

export interface A11yParameters {
element?: ElementContext;
config?: Spec;
options?: RunOptions;
/** @deprecated Use globals.a11y.manual instead */
manual?: boolean;
disable?: boolean;
warnings?: Impact[];
}
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' : ''}`;
}
54 changes: 0 additions & 54 deletions code/addons/a11y/src/preview.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -156,60 +156,6 @@ describe('afterEach', () => {
});
});

it('should report warning status when there are only warnings', async () => {
const context = createContext({
parameters: {
a11y: {
warnings: ['minor'],
},
},
});
const result = {
violations: [
{ impact: 'minor', nodes: [] },
{ impact: 'critical', nodes: [] },
],
};
mockedRun.mockResolvedValue(result as any);

await expect(async () => experimental_afterEach(context)).rejects.toThrow();

expect(mockedRun).toHaveBeenCalledWith(context.parameters.a11y);
expect(context.reporting.addReport).toHaveBeenCalledWith({
type: 'a11y',
version: 1,
result,
status: 'failed',
});
});

it('should report error status when there are warnings and errors', async () => {
const context = createContext({
parameters: {
a11y: {
warnings: ['minor'],
},
},
});
const result = {
violations: [
{ impact: 'minor', nodes: [] },
{ impact: 'critical', nodes: [] },
],
};
mockedRun.mockResolvedValue(result as any);

await expect(async () => experimental_afterEach(context)).rejects.toThrow();

expect(mockedRun).toHaveBeenCalledWith(context.parameters.a11y);
expect(context.reporting.addReport).toHaveBeenCalledWith({
type: 'a11y',
version: 1,
result,
status: 'failed',
});
});

it('should run accessibility checks if "a11ytest" flag is not available and is not running in Vitest', async () => {
const context = createContext({
tags: [],
Expand Down
9 changes: 2 additions & 7 deletions code/addons/a11y/src/preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ export const experimental_afterEach: AfterEach<any> = async ({
}) => {
const a11yParameter: A11yParameters | undefined = parameters.a11y;
const a11yGlobals = globals.a11y;
const warnings = a11yParameter?.warnings ?? [];

const shouldRunEnvironmentIndependent =
a11yParameter?.manual !== true &&
Expand All @@ -38,15 +37,11 @@ export const experimental_afterEach: AfterEach<any> = async ({
if (result) {
const hasViolations = (result?.violations.length ?? 0) > 0;

const hasErrors = result?.violations.some(
(violation) => !warnings.includes(violation.impact!)
);

reporting.addReport({
type: 'a11y',
version: 1,
result: result,
status: hasErrors ? 'failed' : hasViolations ? 'warning' : 'passed',
status: hasViolations ? 'failed' : 'passed',
});

/**
Expand All @@ -58,7 +53,7 @@ export const experimental_afterEach: AfterEach<any> = async ({
* implement proper try catch handling.
*/
if (getIsVitestStandaloneRun()) {
if (hasErrors) {
if (hasViolations) {
// @ts-expect-error - todo - fix type extension of expect from @storybook/test
expect(result).toHaveNoViolations();
}
Expand Down
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.20",
"version": "8.5.0-beta.3",
"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.20",
"version": "8.5.0-beta.3",
"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.20",
"version": "8.5.0-beta.3",
"description": "Interact with component inputs dynamically in the Storybook UI",
"keywords": [
"addon",
Expand Down
Loading

0 comments on commit a1f61f5

Please sign in to comment.