Skip to content

Commit

Permalink
Merge pull request #27036 from storybookjs/version-non-patch-from-8.1…
Browse files Browse the repository at this point in the history
….0-alpha.8

Release: Prerelease beta 8.1.0-beta.0
  • Loading branch information
JReinhold authored May 9, 2024
2 parents fa46ca5 + e19d316 commit fb999ef
Show file tree
Hide file tree
Showing 282 changed files with 5,508 additions and 3,375 deletions.
10 changes: 5 additions & 5 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -768,30 +768,30 @@ workflows:
requires:
- build
- create-sandboxes:
parallelism: 35
parallelism: 37
requires:
- build
# - smoke-test-sandboxes: # disabled for now
# requires:
# - create-sandboxes
- build-sandboxes:
parallelism: 35
parallelism: 37
requires:
- create-sandboxes
- chromatic-sandboxes:
parallelism: 32
parallelism: 34
requires:
- build-sandboxes
- e2e-production:
parallelism: 30
parallelism: 32
requires:
- build-sandboxes
- e2e-dev:
parallelism: 2
requires:
- create-sandboxes
- test-runner-production:
parallelism: 30
parallelism: 32
requires:
- build-sandboxes
- test-portable-stories:
Expand Down
6 changes: 6 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
## 8.0.10

- MDX: Don't transform `http://` links - [#26488](https://github.com/storybookjs/storybook/pull/26488), thanks @JReinhold!
- React: Support v19 in `react-dom-shim` - [#26898](https://github.com/storybookjs/storybook/pull/26898), thanks @Tobbe!
- Vite: Merge assetsInclude property with Storybook default values - [#26860](https://github.com/storybookjs/storybook/pull/26860), thanks @yuemori!

## 8.0.9

- Addon-docs: Fix MDX compilation when using `@vitejs/plugin-react-swc` with plugins - [#26837](https://github.com/storybookjs/storybook/pull/26837), thanks @JReinhold!
Expand Down
11 changes: 11 additions & 0 deletions CHANGELOG.prerelease.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
## 8.1.0-beta.0

- Dependencies: Upgrade `@joshwooding/vite-plugin-react-docgen-typescript` to `0.3.1` - [#26673](https://github.com/storybookjs/storybook/pull/26673), thanks @joshwooding!
- Dependencies: Upgrade `ejs` to `3.1.10` - [#27054](https://github.com/storybookjs/storybook/pull/27054), thanks @RiuSalvi!
- Nextjs: Implement next redirect and the RedirectBoundary - [#27050](https://github.com/storybookjs/storybook/pull/27050), thanks @yannbf!
- Onboarding: Improve UI - [#27074](https://github.com/storybookjs/storybook/pull/27074), thanks @ndelangen!
- Portable Stories: Remove link to missing docs - [#27075](https://github.com/storybookjs/storybook/pull/27075), thanks @JReinhold!
- React: Support v19 betas in peer dependencies - [#26960](https://github.com/storybookjs/storybook/pull/26960), thanks @JReinhold!
- Tags: Add project tags, negation, `dev`/`autodocs`/`test` system tags - [#26634](https://github.com/storybookjs/storybook/pull/26634), thanks @shilman!
- UI: Fix panel layout resizing do not apply when done too fast - [#26460](https://github.com/storybookjs/storybook/pull/26460), thanks @jorge-ji!

## 8.1.0-alpha.8

- Addon-actions: Fix falsy args printing as object - 22163 - [#26917](https://github.com/storybookjs/storybook/pull/26917), thanks @Fatcat560!
Expand Down
48 changes: 44 additions & 4 deletions MIGRATION.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
<h1>Migration</h1>

- [From version 8.0.x to 8.1.x](#from-version-80x-to-81x)
- [Subtitle block and `parameters.componentSubtitle`](#subtitle-block-and-parameterscomponentsubtitle)
- [Title block](#title-block)
- [Portable stories](#portable-stories)
- [@storybook/nextjs requires specific path aliases to be setup](#storybooknextjs-requires-specific-path-aliases-to-be-setup)
- [main.js `docs.autodocs` is deprecated](#mainjs-docsautodocs-is-deprecated)
- [`docs` and `story` system tags removed](#docs-and-story-system-tags-removed)
- [Subtitle block and `parameters.componentSubtitle`](#subtitle-block-and-parameterscomponentsubtitle)
- [Title block `of` prop](#title-block-of-prop)
- [From version 7.x to 8.0.0](#from-version-7x-to-800)
- [Portable stories](#portable-stories-1)
- [Project annotations are now merged instead of overwritten in composeStory](#project-annotations-are-now-merged-instead-of-overwritten-in-composestory)
Expand Down Expand Up @@ -430,13 +432,51 @@ module.exports = createJestConfig(customJestConfig);

This will make sure you end using the correct implementation of the packages and avoid having issues in your tests.

### main.js `docs.autodocs` is deprecated

The `docs.autodocs` setting in `main.js` is deprecated in 8.1 and will be removed in 9.0.

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'`.

Starting in 8.1, to generate autodocs for every component (`docs.autodocs = true`), add the following code to `.storybook/preview.js`:

```js
// .storybook/preview.js
export default {
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:

```js
// Button.stories.ts
export default {
component: Button,
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.

If you had set `docs.autodocs = false`, this still works in 8.x, but will go away in 9.0 as a breaking change. If you don't want autodocs at all, simply remove the `'autodocs'` tag throughout your Storybook and autodocs will not be created.

### `docs` and `story` system tags removed

Storybook automatically added the tag `'docs'` to any docs entry in the index and `'story'` to any story entry in the index. This behavior was undocumented, and in an effort to reduce the number of tags we've removed them in 8.1. If you depended on these tags, please file an issue on the [Storybook monorepo](https://github.com/storybookjs/storybook) and let us know!

### Subtitle block and `parameters.componentSubtitle`

The `Subtitle` block now accepts an `of` prop, which can be a reference to a CSF file or a default export (meta).

`parameters.componentSubtitle` has been deprecated to be consistent with other parameters related to autodocs, instead use `parameters.docs.subtitle`.

##### Title block
### Title block `of` prop

The `Title` block now accepts an `of` prop, which can be a reference to a CSF file or a default export (meta).

Expand Down Expand Up @@ -3859,7 +3899,7 @@ export default {
We are replacing `@storybook/addon-knobs` with `@storybook/addon-controls`.
- [Rationale & discussion](https://github.com/storybookjs/storybook/discussions/15060)
- [Migration notes](https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#how-do-i-migrate-from-addon-knobs)
- [Migration notes](https://github.com/storybookjs/storybook/blob/next/code/addons/controls/README.md#how-do-i-migrate-from-addon-knobs)
#### Deprecated scoped blocks imports
Expand Down
4 changes: 3 additions & 1 deletion code/addons/docs/src/preview.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@ export const parameters: any = {
filter: (story: PreparedStory) => {
const tags = story.tags || [];
return (
tags.filter((tag) => excludeTags[tag]).length === 0 && !story.parameters.docs?.disable
tags.includes('autodocs') &&
tags.filter((tag) => excludeTags[tag]).length === 0 &&
!story.parameters.docs?.disable
);
},
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,8 @@ export default {
docs: {
name: 'ResolvedReact',
},
// the version string changes with every release of React/Next.js/Preact, not worth snapshotting
chromatic: { disable: true },
},
};

Expand Down
2 changes: 1 addition & 1 deletion code/addons/gfm/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export const mdxLoaderOptions = async (config: any) => {
deprecate(dedent`
The "@storybook/addon-mdx-gfm" addon is meant as a migration assistant for Storybook 8.0; and will likely be removed in a future version.
It's recommended you read this document:
https://storybook.js.org/docs/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm
https://storybook.js.org/docs/writing-docs/mdx#markdown-tables-arent-rendering-correctly
Once you've made the necessary changes, you can remove the addon from your package.json and storybook config.
`);
4 changes: 2 additions & 2 deletions code/addons/links/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
"prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts"
},
"dependencies": {
"@storybook/csf": "^0.1.6",
"@storybook/csf": "^0.1.7",
"@storybook/global": "^5.0.0",
"ts-dedent": "^2.0.0"
},
Expand All @@ -82,7 +82,7 @@
"typescript": "^5.3.2"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta"
},
"peerDependenciesMeta": {
"react": {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import { keyframes, styled } from '@storybook/theming';
import { Modal } from '@storybook/components';

export const ModalWrapper = styled(Modal)`
background: white;
`;
export const ModalWrapper = styled(Modal)``;

export const ModalContent = styled.div`
display: flex;
Expand All @@ -21,10 +19,13 @@ export const Main = styled.div`
flex: 1;
display: flex;
flex-direction: column;
background: white;
font-family: ${({ theme }) => theme.typography.fonts.base};
`;

export const Header = styled.div`
position: relative;
z-index: 1;
box-sizing: border-box;
display: flex;
justify-content: space-between;
Expand Down Expand Up @@ -64,20 +65,20 @@ export const Content = styled.div`
}
`;

export const SpanHighlight = styled.span`
display: inline-flex;
border-radius: 3px;
padding: 0 5px;
margin-bottom: -2px;
opacity: 0.8;
font-family: ${({ theme }) => theme.typography.fonts.mono};
font-size: 11px;
border: 1px solid #ecf4f9;
color: ${({ theme }) => theme.color.darkest};
background-color: #f7fafc;
box-sizing: border-box;
line-height: 17px;
`;
export const SpanHighlight = styled.span(({ theme }) => ({
display: 'inline-flex',
borderRadius: 3,
padding: '0 5px',
marginBottom: -2,
opacity: 0.8,
fontFamily: theme.typography.fonts.mono,
fontSize: 11,
border: theme.base === 'dark' ? theme.color.darkest : theme.color.lightest,
color: theme.base === 'dark' ? theme.color.lightest : theme.color.darkest,
backgroundColor: theme.base === 'dark' ? 'black' : theme.color.light,
boxSizing: 'border-box',
lineHeight: '17px',
}));

export const Image = styled.img`
max-width: 100%;
Expand All @@ -90,8 +91,10 @@ export const Background = styled.div`
left: 0;
width: 100%;
height: 100%;
z-index: -1;
z-index: 0;
overflow: hidden;
z-index: 0;
pointer-events: none;
`;

export const circle1Anim = keyframes`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,12 @@ export const WriteStoriesModal: FC<WriteStoriesModalProps> = ({
</Button>
)}
<Main>
<Background>
<Circle1 />
<Circle2 />
<Circle3 />
</Background>

<Header>
<Modal.Title asChild>
<ModalTitle>
Expand Down Expand Up @@ -280,11 +286,6 @@ export const WriteStoriesModal: FC<WriteStoriesModalProps> = ({
) : null)}
</Content>
</Modal.Description>
<Background>
<Circle1 />
<Circle2 />
<Circle3 />
</Background>
</Main>
</ModalContent>
</ModalWrapper>
Expand Down
2 changes: 1 addition & 1 deletion code/builders/builder-manager/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
"@types/ejs": "^3.1.1",
"@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
"browser-assert": "^1.2.1",
"ejs": "^3.1.8",
"ejs": "^3.1.10",
"esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0",
"esbuild-plugin-alias": "^0.2.1",
"express": "^4.17.3",
Expand Down
6 changes: 6 additions & 0 deletions code/e2e-tests/addon-docs.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,12 @@ test.describe('addon-docs', () => {
expectedReactVersionRange = /^17/;
} else if (templateName.includes('react16')) {
expectedReactVersionRange = /^16/;
} else if (
templateName.includes('nextjs/prerelease') ||
templateName.includes('react-vite/prerelease') ||
templateName.includes('react-webpack/prerelease')
) {
expectedReactVersionRange = /^19/;
}

// Arrange - Get the actual versions
Expand Down
49 changes: 49 additions & 0 deletions code/e2e-tests/module-mocking.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import { test, expect } from '@playwright/test';
import process from 'process';
import { SbPage } from './util';

const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';

test.describe('module-mocking', () => {
test.beforeEach(async ({ page }) => {
await page.goto(storybookUrl);

await new SbPage(page).waitUntilLoaded();
});

test('should assert story lifecycle order', async ({ page }) => {
const sbPage = new SbPage(page);

await sbPage.navigateToStory('lib/test/before-each', 'before-each-order');

await sbPage.viewAddonPanel('Actions');
const logItem = await page.locator('#storybook-panel-root #panel-tab-content');
await expect(logItem).toBeVisible();

const expectedTexts = [
'1 - [from loaders]',
'2 - [from meta beforeEach]',
'3 - [from story beforeEach]',
'4 - [from decorator]',
'5 - [from onClick]',
];

// Assert that each LI text content contains the expected text in order
for (let i = 0; i < expectedTexts.length; i++) {
const nthText = await logItem.locator(`li >> nth=${i}`).innerText();
expect(nthText).toMatch(expectedTexts[i]);
}
});

test('should assert that utils import is mocked', async ({ page }) => {
const sbPage = new SbPage(page);

await sbPage.navigateToStory('lib/test/module-mocking', 'basic');

await sbPage.viewAddonPanel('Actions');
const logItem = await page.locator('#storybook-panel-root #panel-tab-content', {
hasText: 'foo: []',
});
await expect(logItem).toBeVisible();
});
});
Loading

0 comments on commit fb999ef

Please sign in to comment.