Skip to content

Commit

Permalink
Merge branch 'next' into norbert/cpc
Browse files Browse the repository at this point in the history
  • Loading branch information
ndelangen committed Jun 11, 2024
2 parents aa0e744 + a496ec4 commit d7ed2dc
Show file tree
Hide file tree
Showing 92 changed files with 254 additions and 159 deletions.
20 changes: 20 additions & 0 deletions CHANGELOG.prerelease.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,23 @@
## 8.2.0-alpha.7

- Angular: Allow outputPath object syntax - [#28144](https://github.com/storybookjs/storybook/pull/28144), thanks @valentinpalkovic!
- Angular: Introduce preserveSymlink builder option - [#28145](https://github.com/storybookjs/storybook/pull/28145), thanks @valentinpalkovic!
- CLI: Fix typo in React Docgen migration - [#27536](https://github.com/storybookjs/storybook/pull/27536), thanks @jonniebigodes!
- CSF: Automatically extract componentPath - [#24396](https://github.com/storybookjs/storybook/pull/24396), thanks @shilman!
- Core: Remove more `.stories.mdx` handling - [#25973](https://github.com/storybookjs/storybook/pull/25973), thanks @JReinhold!
- Docs-tools: Replace `doctrine` with `jsdoc-type-pratt-parser` - [#26305](https://github.com/storybookjs/storybook/pull/26305), thanks @43081j!
- Test: Display toHaveBeenCalledWith expected / received values on failure - [#28088](https://github.com/storybookjs/storybook/pull/28088), thanks @kasperpeulen!

## 8.2.0-alpha.6

- Addon-actions: Only log spies with names - [#28091](https://github.com/storybookjs/storybook/pull/28091), thanks @kasperpeulen!
- Build: Change require/import order, so that import has higher prio if both are specified - [#27730](https://github.com/storybookjs/storybook/pull/27730), thanks @kasperpeulen!
- CLI: Only log the UpgradeStorybookToSameVersionError but continue the upgrade as normal - [#27217](https://github.com/storybookjs/storybook/pull/27217), thanks @kasperpeulen!
- Core: Replace ip function with a small helper function to address security concerns - [#27529](https://github.com/storybookjs/storybook/pull/27529), thanks @tony19!
- Portable Stories: Add tags to composed story - [#27708](https://github.com/storybookjs/storybook/pull/27708), thanks @yannbf!
- Test: Upgrade deps of @storybook/test - [#27862](https://github.com/storybookjs/storybook/pull/27862), thanks @kasperpeulen!
- Vite: Fix stats-plugin to normalize file names with posix paths - [#27218](https://github.com/storybookjs/storybook/pull/27218), thanks @AlexAtVista!

## 8.2.0-alpha.5

- Angular: Fix wrong detection of standalone components - [#27353](https://github.com/storybookjs/storybook/pull/27353), thanks @dario-baumberger!
Expand Down
47 changes: 31 additions & 16 deletions MIGRATION.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
- [Manager addons are now rendered with React 18](#manager-addons-are-now-rendered-with-react-18)
- [Removal of `storiesOf`-API](#removal-of-storiesof-api)
- [Removed deprecated shim packages](#removed-deprecated-shim-packages)
- [Deprecated `@storybook/testing-library` package](#deprecated-storybooktesting-library-package)
- [Framework-specific Vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added)
- [For React:](#for-react)
- [For Vue:](#for-vue)
Expand Down Expand Up @@ -97,17 +98,17 @@
- [Tab addons cannot manually route, Tool addons can filter their visibility via tabId](#tab-addons-cannot-manually-route-tool-addons-can-filter-their-visibility-via-tabid)
- [Removed `config` preset](#removed-config-preset-1)
- [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
- [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
- [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
- [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated)
- [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
- [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react)
- [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
- [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
- [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated)
- [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
- [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react)
- [From version 7.4.0 to 7.5.0](#from-version-740-to-750)
- [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
- [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
- [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
- [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
- [From version 7.0.0 to 7.2.0](#from-version-700-to-720)
- [Addon API is more type-strict](#addon-api-is-more-type-strict)
- [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated)
- [Addon API is more type-strict](#addon-api-is-more-type-strict)
- [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated)
- [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
- [7.0 breaking changes](#70-breaking-changes)
- [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below)
Expand All @@ -133,7 +134,7 @@
- [Deploying build artifacts](#deploying-build-artifacts)
- [Dropped support for file URLs](#dropped-support-for-file-urls)
- [Serving with nginx](#serving-with-nginx)
- [Ignore story files from node\_modules](#ignore-story-files-from-node_modules)
- [Ignore story files from node_modules](#ignore-story-files-from-node_modules)
- [7.0 Core changes](#70-core-changes)
- [7.0 feature flags removed](#70-feature-flags-removed)
- [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates)
Expand All @@ -147,7 +148,7 @@
- [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default)
- [7.0 Vite changes](#70-vite-changes)
- [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically)
- [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
- [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
- [7.0 Webpack changes](#70-webpack-changes)
- [Webpack4 support discontinued](#webpack4-support-discontinued)
- [Babel mode v7 exclusively](#babel-mode-v7-exclusively)
Expand Down Expand Up @@ -197,7 +198,7 @@
- [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration)
- [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
- [Autoplay in docs](#autoplay-in-docs)
- [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global)
- [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global)
- [7.0 Deprecations and default changes](#70-deprecations-and-default-changes)
- [storyStoreV7 enabled by default](#storystorev7-enabled-by-default)
- [`Story` type deprecated](#story-type-deprecated)
Expand Down Expand Up @@ -439,6 +440,7 @@ The `docs.autodocs` setting in `main.js` is deprecated in 8.1 and will be remove
It has been replaced with a tags-based system which is more flexible than before.

`docs.autodocs` takes three values:

- `true`: generate autodocs for every component
- `false`: don't generate autodocs at all
- `tag`: generate autodocs for components that have been tagged `'autodocs'`.
Expand All @@ -448,8 +450,8 @@ Starting in 8.1, to generate autodocs for every component (`docs.autodocs = true
```js
// .storybook/preview.js
export default {
tags: ['autodocs'],
}
tags: ["autodocs"],
};
```

Tags cascade, so setting `'autodocs'` at the project level automatically propagates to every component and story. If you set autodocs globally and want to opt-out for a particular component, you can remove the `'autodocs'` tag for a component like this:
Expand All @@ -458,8 +460,8 @@ Tags cascade, so setting `'autodocs'` at the project level automatically propaga
// Button.stories.ts
export default {
component: Button,
tags: ['!autodocs'],
}
tags: ["!autodocs"],
};
```

If you had set `docs.autodocs = 'tag'`, the default setting, you can remove the setting from `.storybook/main.js`. That is now the default behavior.
Expand Down Expand Up @@ -602,6 +604,19 @@ These sections explain the rationale, and the required changes you might have to
- [New Addons API](#new-addons-api)
- [`addons.setConfig` should now be imported from `@storybook/manager-api`.](#addonssetconfig-should-now-be-imported-from-storybookmanager-api)

### Deprecated `@storybook/testing-library` package

In Storybook 8, `@storybook/testing-library` has been integrated to a new package called `@storybook/test`, which uses Vitest APIs for an improved experience. When upgrading to Storybook 8 with 'npx storybook@latest upgrade', you will get prompted and will get an automigration for the new package. Please migrate when you can.

To migrate by hand, install `@storybook/test` and replace `@storybook/testing-libary` imports globally:

```ts
- import { userEvent } from '@storybook/testing-library';
+ import { userEvent } from '@storybook/test';
```

For more information on the change, see the [announcement post](https://storybook.js.org/blog/storybook-test/).

### Framework-specific Vite plugins have to be explicitly added

In Storybook 7, we would automatically add frameworks-specific Vite plugins, e.g. `@vitejs/plugin-react` if not installed.
Expand Down
2 changes: 1 addition & 1 deletion 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.2.0-alpha.6",
"version": "8.2.0-alpha.7",
"description": "Test component compliance with web accessibility standards",
"keywords": [
"a11y",
Expand Down
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.2.0-alpha.6",
"version": "8.2.0-alpha.7",
"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.2.0-alpha.6",
"version": "8.2.0-alpha.7",
"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.2.0-alpha.6",
"version": "8.2.0-alpha.7",
"description": "Interact with component inputs dynamically in the Storybook UI",
"keywords": [
"addon",
Expand Down
2 changes: 1 addition & 1 deletion 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.2.0-alpha.6",
"version": "8.2.0-alpha.7",
"description": "Document component usage and properties in Markdown",
"keywords": [
"addon",
Expand Down
2 changes: 1 addition & 1 deletion code/addons/essentials/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-essentials",
"version": "8.2.0-alpha.6",
"version": "8.2.0-alpha.7",
"description": "Curated addons to bring out the best of Storybook",
"keywords": [
"addon",
Expand Down
2 changes: 1 addition & 1 deletion code/addons/gfm/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-mdx-gfm",
"version": "8.2.0-alpha.6",
"version": "8.2.0-alpha.7",
"description": "GitHub Flavored Markdown in Storybook",
"keywords": [
"addon",
Expand Down
2 changes: 1 addition & 1 deletion code/addons/highlight/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-highlight",
"version": "8.2.0-alpha.6",
"version": "8.2.0-alpha.7",
"description": "Highlight DOM nodes within your stories",
"keywords": [
"storybook-addons",
Expand Down
2 changes: 1 addition & 1 deletion code/addons/interactions/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-interactions",
"version": "8.2.0-alpha.6",
"version": "8.2.0-alpha.7",
"description": "Automate, test and debug user interactions",
"keywords": [
"storybook-addons",
Expand Down
38 changes: 14 additions & 24 deletions code/addons/interactions/src/components/Interaction.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ import { styled, typography } from '@storybook/core/dist/theming';
import { transparentize } from 'polished';

import { ListUnorderedIcon } from '@storybook/icons';
import { Expected, MatcherResult, Received } from './MatcherResult';
import { MatcherResult } from './MatcherResult';
import { MethodCall } from './MethodCall';
import { StatusIcon } from './StatusIcon';

import type { Controls } from './InteractionsPanel';
import { isJestError } from '../utils';
import { isChaiError, isJestError } from '../utils';

const MethodCallWrapper = styled.div(() => ({
fontFamily: typography.fonts.mono,
Expand Down Expand Up @@ -117,33 +117,23 @@ export const Exception = ({ exception }: { exception: Call['exception'] }) => {
if (isJestError(exception)) {
return <MatcherResult {...exception} />;
}
if (isChaiError(exception)) {
return (
<RowMessage>
<MatcherResult
message={`${exception.message}${exception.diff ? `\n\n${exception.diff}` : ''}`}
style={{ padding: 0 }}
/>
<p>See the full stack trace in the browser console.</p>
</RowMessage>
);
}

const paragraphs = exception.message.split('\n\n');
const more = paragraphs.length > 1;
return (
<RowMessage>
<pre>{paragraphs[0]}</pre>
{exception.showDiff && exception.diff ? (
<>
<br />
<MatcherResult message={exception.diff} style={{ padding: 0 }} />
</>
) : (
<pre>
<br />
{exception.expected && (
<>
Expected: <Expected value={exception.expected} />
<br />
</>
)}
{exception.actual && (
<>
Received: <Received value={exception.actual} />
<br />
</>
)}
</pre>
)}
{more && <p>See the full stack trace in the browser console.</p>}
</RowMessage>
);
Expand Down
80 changes: 54 additions & 26 deletions code/addons/interactions/src/components/MatcherResult.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,53 +29,81 @@ export default {
export const Expected = {
args: {
message: dedent`
expect(jest.fn()).lastCalledWith(...expected)
Expected: {"email": "[email protected]", "password": "testpasswordthatwontfail"}
Number of calls: 0
expected last "spy" call to have been called with [ { …(2) } ]
- Expected:
Array [
Object {
"email": "[email protected]",
"password": "testpasswordthatwontfail",
},
]
+ Received:
undefined
`,
},
};

export const ExpectedReceived = {
args: {
message: dedent`
expect(jest.fn()).toHaveBeenCalledWith(...expected)
Expected: called with 0 arguments
Received: {"email": "[email protected]", "password": "testpasswordthatwontfail"}
Number of calls: 1
expected last "spy" call to have been called with []
- Expected
+ Received
- Array []
+ Array [
+ Object {
+ "email": "[email protected]",
+ "password": "testpasswordthatwontfail",
+ },
+ ]
`,
},
};

export const ExpectedNumberOfCalls = {
args: {
message: dedent`
expect(jest.fn()).toHaveBeenCalledTimes(expected)
Expected number of calls: 1
Received number of calls: 0
expected "spy" to not be called at all, but actually been called 1 times
Received:
1st spy call:
Array [
Object {
"email": "[email protected]",
"password": "testpasswordthatwontfail",
},
]
Number of calls: 1
`,
},
};

export const Diff = {
args: {
message: dedent`
expect(jest.fn()).toHaveBeenCalledWith(...expected)
- Expected
+ Received
Object {
- "email": "[email protected]",
+ "email": "[email protected]",
"password": "testpasswordthatwontfail",
},
expected "spy" to be called with arguments: [ { …(2) } ]
Received:
1st spy call:
Array [
Object {
- "email": "[email protected]",
+ "email": "[email protected]",
"password": "testpasswordthatwontfail",
},
]
Number of calls: 1
`,
},
Expand Down
2 changes: 1 addition & 1 deletion code/addons/interactions/src/components/MatcherResult.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export const MatcherResult = ({
if (line.match(/^\s*- /)) {
return [<Expected key={line + index} value={line} />, <br key={`br${index}`} />];
}
if (line.match(/^\s*\+ /)) {
if (line.match(/^\s*\+ /) || line.match(/^Received: $/)) {
return [<Received key={line + index} value={line} />, <br key={`br${index}`} />];
}

Expand Down
2 changes: 1 addition & 1 deletion code/addons/jest/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-jest",
"version": "8.2.0-alpha.6",
"version": "8.2.0-alpha.7",
"description": "React storybook addon that show component jest report",
"keywords": [
"addon",
Expand Down
Loading

0 comments on commit d7ed2dc

Please sign in to comment.