Skip to content

Commit

Permalink
Merge pull request #24269 from storybookjs/version-prerelease-from-7.…
Browse files Browse the repository at this point in the history
…5.0-alpha.3

Release: Prerelease 7.5.0-alpha.4
  • Loading branch information
JReinhold authored Oct 3, 2023
2 parents a12a65b + 090ba7f commit 4ba3c3f
Show file tree
Hide file tree
Showing 43 changed files with 330 additions and 186 deletions.
20 changes: 10 additions & 10 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -555,27 +555,27 @@ workflows:
requires:
- unit-tests
- create-sandboxes:
parallelism: 21
parallelism: 20
requires:
- build
- build-sandboxes:
parallelism: 21
parallelism: 20
requires:
- create-sandboxes
- chromatic-sandboxes:
parallelism: 18
parallelism: 17
requires:
- build-sandboxes
- e2e-production:
parallelism: 18
parallelism: 17
requires:
- build-sandboxes
- e2e-dev:
parallelism: 4
requires:
- create-sandboxes
- test-runner-production:
parallelism: 18
parallelism: 17
requires:
- build-sandboxes
- bench:
Expand Down Expand Up @@ -609,30 +609,30 @@ workflows:
requires:
- build
- create-sandboxes:
parallelism: 34
parallelism: 33
requires:
- build
# - smoke-test-sandboxes: # disabled for now
# requires:
# - create-sandboxes
- build-sandboxes:
parallelism: 34
parallelism: 33
requires:
- create-sandboxes
- chromatic-sandboxes:
parallelism: 31
parallelism: 30
requires:
- build-sandboxes
- e2e-production:
parallelism: 31
parallelism: 30
requires:
- build-sandboxes
- e2e-dev:
parallelism: 4
requires:
- create-sandboxes
- test-runner-production:
parallelism: 31
parallelism: 30
requires:
- build-sandboxes
# TODO: reenable once we find out the source of flakyness
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/generate-sandboxes-next.yml
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ jobs:
run: yarn wait-on http://localhost:6001
working-directory: ./code
- name: Generate
run: yarn generate-sandboxes --local-registry --exclude=angular-cli/prerelease
run: yarn generate-sandboxes --local-registry --exclude=angular-cli/prerelease --debug
working-directory: ./code
- name: Publish
run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=next
Expand Down
9 changes: 9 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
## 7.4.5

- UI: Fix infinite hook call causing browsers to freeze - [#24291](https://github.com/storybookjs/storybook/pull/24291), thanks [@yannbf](https://github.com/yannbf)!

## 7.4.4

- Core: Fix Promise cycle bug in useSharedState - [#24268](https://github.com/storybookjs/storybook/pull/24268), thanks [@ndelangen](https://github.com/ndelangen)!
- Manager: Fix useAddonState when using a setter function - [#24237](https://github.com/storybookjs/storybook/pull/24237), thanks [@ndelangen](https://github.com/ndelangen)!

## 7.4.3

- CLI: Fix `sb add` adding duplicative entries - [#24229](https://github.com/storybookjs/storybook/pull/24229), thanks [@ndelangen](https://github.com/ndelangen)!
Expand Down
12 changes: 12 additions & 0 deletions CHANGELOG.prerelease.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,15 @@
## 7.5.0-alpha.4

- CLI: Fix Nextjs project detection - [#24346](https://github.com/storybookjs/storybook/pull/24346), thanks [@yannbf](https://github.com/yannbf)!
- Core: Deprecate `storyStoreV6` (including `storiesOf`) and `storyIndexers` - [#23938](https://github.com/storybookjs/storybook/pull/23938), thanks [@JReinhold](https://github.com/JReinhold)!
- Core: Fix Promise cycle bug in useSharedState - [#24268](https://github.com/storybookjs/storybook/pull/24268), thanks [@ndelangen](https://github.com/ndelangen)!
- Core: Fix missing favicon during dev - [#24356](https://github.com/storybookjs/storybook/pull/24356), thanks [@ndelangen](https://github.com/ndelangen)!
- NextJS: Change babel plugins from `proposal-...` to `transform-...` - [#24290](https://github.com/storybookjs/storybook/pull/24290), thanks [@roottool](https://github.com/roottool)!
- Nextjs: Improve support for Windows-style paths - [#23695](https://github.com/storybookjs/storybook/pull/23695), thanks [@T99](https://github.com/T99)!
- UI: Fix infinite hook call causing browsers to freeze - [#24291](https://github.com/storybookjs/storybook/pull/24291), thanks [@yannbf](https://github.com/yannbf)!
- UI: Improve contrast ratio between focus / hover - [#24205](https://github.com/storybookjs/storybook/pull/24205), thanks [@chocoscoding](https://github.com/chocoscoding)!
- Vite: Move mdx-plugin from @storybook/builder-vite to @storybook/addon-docs - [#24166](https://github.com/storybookjs/storybook/pull/24166), thanks [@bryanjtc](https://github.com/bryanjtc)!

## 7.5.0-alpha.3

- Build: Filter some manager errors - [#24217](https://github.com/storybookjs/storybook/pull/24217), thanks [@yannbf](https://github.com/yannbf)!
Expand Down
90 changes: 80 additions & 10 deletions MIGRATION.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
<h1>Migration</h1>

- [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)
- [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 API is more type-strict](#addon-api-is-more-type-strict)
- [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 @@ -27,7 +30,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 @@ -39,7 +42,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 @@ -89,7 +92,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 @@ -302,6 +305,72 @@
- [Packages renaming](#packages-renaming)
- [Deprecated embedded addons](#deprecated-embedded-addons)

## From version 7.4.0 to 7.5.0

#### `storyStoreV6` and `storiesOf` is deprecated

`storyStoreV6` and `storiesOf` is deprecated and will be completely removed in Storybook 8.0.0.

If you're using `storiesOf` we recommend you migrate your stories to CSF3 for a better story writing experience.
In many cases you can get started with the migration by using two migration scripts:

```bash

# 1. convert storiesOf to CSF
npx storybook@latest migrate storiesof-to-csf --glob="**/*.stories.tsx" --parser=tsx

# 2. Convert CSF 2 to CSF 3
npx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=tsx
```

They won't do a perfect migration so we recommend that you manually go through each file afterwards.

Alternatively you can build your own `storiesOf` implementation by leveraging the new (experimental) indexer API ([documentation](https://storybook.js.org/docs/react/api/main-config-indexers), [migration](#storyindexers-is-replaced-with-experimental_indexers)). A proof of concept of such an implementation can be seen in [this StackBlitz demo](https://stackblitz.com/edit/github-h2rgfk?file=README.md). See the demo's `README.md` for a deeper explanation of the implementation.

#### `storyIndexers` is replaced with `experimental_indexers`

Defining custom indexers for stories has become a more official - yet still experimental - API which is now configured at `experimental_indexers` instead of `storyIndexers` in `main.ts`. `storyIndexers` has been deprecated and will be fully removed in version 8.0.0.

The new experimental indexers are documented [here](https://storybook.js.org/docs/react/api/main-config-indexers). The most notable change from `storyIndexers` is that the indexer must now return a list of [`IndexInput`](https://github.com/storybookjs/storybook/blob/next/code/lib/types/src/modules/indexer.ts#L104-L148) instead of `CsfFile`. It's possible to construct an `IndexInput` from a `CsfFile` using the `CsfFile.indexInputs` getter.

That means you can convert an existing story indexer like this:

```diff
// .storybook/main.ts

import { readFileSync } from 'fs';
import { loadCsf } from '@storybook/csf-tools';

export default {
- storyIndexers = (indexers) => {
- const indexer = async (fileName, opts) => {
+ experimental_indexers = (indexers) => {
+ const createIndex = async (fileName, opts) => {
const code = readFileSync(fileName, { encoding: 'utf-8' });
const makeTitle = (userTitle) => {
// Do something with the auto title retrieved by Storybook
return userTitle;
};

// Parse the CSF file with makeTitle as a custom context
- return loadCsf(code, { ...compilationOptions, makeTitle, fileName }).parse();
+ return loadCsf(code, { ...compilationOptions, makeTitle, fileName }).parse().indexInputs;
};

return [
{
test: /(stories|story)\.[tj]sx?$/,
- indexer,
+ createIndex,
},
...(indexers || []),
];
},
};
```

As an addon author you can support previous versions of Storybook by setting both `storyIndexers` and `indexers_experimental`, without triggering the deprecation warning.

## From version 7.0.0 to 7.2.0

#### Addon API is more type-strict
Expand All @@ -311,14 +380,15 @@ When registering an addon using `@storybook/manager-api`, the addon API is now m
The `type` property is now a required field, and the `id` property should not be set anymore.

Here's a correct example:

```tsx
import { addons, types } from '@storybook/manager-api';

addons.register('my-addon', () => {
addons.add('my-addon/panel', {
type: types.PANEL,
title: 'My Addon',
render: ({ active }) => active ? <div>Hello World</div> : null,
render: ({ active }) => (active ? <div>Hello World</div> : null),
});
});
```
Expand Down Expand Up @@ -869,16 +939,16 @@ Given the following `main.js`:

```js
export default {
stories: ['../**/*.stories.*']
}
stories: ['../**/*.stories.*'],
};
```

If you want to restore the previous behavior to include `node_modules`, you can update it to:

```js
export default {
stories: ['../**/*.stories.*', '../**/node_modules/**/*.stories.*']
}
stories: ['../**/*.stories.*', '../**/node_modules/**/*.stories.*'],
};
```

The first glob would have node_modules automatically excluded by Storybook, and the second glob would include all stories that are under a nested `node_modules` directory.
Expand Down Expand Up @@ -1046,7 +1116,7 @@ Starting in 7.0, we drop support for Angular < 14

_Has automigration_

In Storybook 6.4 we deprecated calling Storybook directly (e.g. `npm run storybook`) for Angular. In Storybook 7.0, we've removed it entirely. Instead, you have to set up the Storybook builder in your `angular.json` and execute `ng run <your-project>:storybook` to start Storybook.
In Storybook 6.4 we deprecated calling Storybook directly (e.g. `npm run storybook`) for Angular. In Storybook 7.0, we've removed it entirely. Instead, you have to set up the Storybook builder in your `angular.json` and execute `ng run <your-project>:storybook` to start Storybook.

You can run `npx storybook@next automigrate` to automatically fix your configuration, or visit https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular/README.md#how-do-i-migrate-to-an-angular-storybook-builder for instructions on how to set up Storybook for Angular manually.

Expand Down
4 changes: 3 additions & 1 deletion code/addons/docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -119,9 +119,11 @@
"ts-dedent": "^2.0.0"
},
"devDependencies": {
"@rollup/pluginutils": "^5.0.2",
"react": "^16.14.0",
"react-dom": "^16.8.0",
"typescript": "~4.9.3"
"typescript": "~4.9.3",
"vite": "^4.0.4"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import type { Options } from '@storybook/types';
import type { Plugin } from 'vite';
import remarkSlug from 'remark-slug';
import remarkExternalLinks from 'remark-external-links';
import { createFilter } from 'vite';
import { createFilter } from '@rollup/pluginutils';
import { dirname, join } from 'path';

const isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith('story.mdx');
Expand Down
9 changes: 9 additions & 0 deletions code/addons/docs/src/preset.ts
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,15 @@ export const addons: StorybookConfig['addons'] = [
require.resolve('@storybook/react-dom-shim/dist/preset'),
];

export const viteFinal = async (config: any, options: Options) => {
const { plugins = [] } = config;
const { mdxPlugin } = await import('./plugins/mdx-plugin');

plugins.push(mdxPlugin(options));

return config;
};

/*
* This is a workaround for https://github.com/Swatinem/rollup-plugin-dts/issues/162
* something down the dependency chain is using typescript namespaces, which are not supported by rollup-plugin-dts
Expand Down
6 changes: 0 additions & 6 deletions code/builders/builder-vite/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@
"@storybook/client-logger": "workspace:*",
"@storybook/core-common": "workspace:*",
"@storybook/csf-plugin": "workspace:*",
"@storybook/mdx2-csf": "^1.0.0",
"@storybook/node-logger": "workspace:*",
"@storybook/preview": "workspace:*",
"@storybook/preview-api": "workspace:*",
Expand All @@ -59,8 +58,6 @@
"find-cache-dir": "^3.0.0",
"fs-extra": "^11.1.0",
"magic-string": "^0.30.0",
"remark-external-links": "^8.0.0",
"remark-slug": "^6.0.0",
"rollup": "^2.25.0 || ^3.3.0"
},
"devDependencies": {
Expand Down Expand Up @@ -96,9 +93,6 @@
"entries": [
"./src/index.ts"
],
"externals": [
"@storybook/mdx1-csf"
],
"platform": "node"
},
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17"
Expand Down
1 change: 0 additions & 1 deletion code/builders/builder-vite/src/plugins/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
export * from './inject-export-order-plugin';
export * from './mdx-plugin';
export * from './strip-story-hmr-boundaries';
export * from './code-generator-plugin';
export * from './csf-plugin';
Expand Down
2 changes: 0 additions & 2 deletions code/builders/builder-vite/src/vite-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import {
codeGeneratorPlugin,
csfPlugin,
injectExportOrderPlugin,
mdxPlugin,
stripStoryHMRBoundary,
externalGlobalsPlugin,
} from './plugins';
Expand Down Expand Up @@ -81,7 +80,6 @@ export async function pluginConfig(options: Options) {
const plugins = [
codeGeneratorPlugin(options),
await csfPlugin(options),
await mdxPlugin(options),
injectExportOrderPlugin,
stripStoryHMRBoundary(),
{
Expand Down
8 changes: 4 additions & 4 deletions code/frameworks/nextjs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -80,13 +80,13 @@
},
"dependencies": {
"@babel/core": "^7.22.9",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-proposal-export-namespace-from": "^7.18.9",
"@babel/plugin-proposal-numeric-separator": "^7.18.6",
"@babel/plugin-proposal-object-rest-spread": "^7.20.7",
"@babel/plugin-syntax-bigint": "^7.8.3",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-syntax-import-assertions": "^7.22.5",
"@babel/plugin-transform-class-properties": "^7.22.5",
"@babel/plugin-transform-export-namespace-from": "^7.22.11",
"@babel/plugin-transform-numeric-separator": "^7.22.11",
"@babel/plugin-transform-object-rest-spread": "^7.22.15",
"@babel/plugin-transform-runtime": "^7.22.9",
"@babel/preset-env": "^7.22.9",
"@babel/preset-react": "^7.22.5",
Expand Down
8 changes: 4 additions & 4 deletions code/frameworks/nextjs/src/babel/preset.ts
Original file line number Diff line number Diff line change
Expand Up @@ -142,9 +142,9 @@ export default (api: any, options: NextBabelPresetOptions = {}): BabelPreset =>
require('@babel/plugin-syntax-dynamic-import'),
require('@babel/plugin-syntax-import-assertions'),
require('./plugins/react-loadable-plugin'),
[require('@babel/plugin-proposal-class-properties'), options['class-properties'] || {}],
[require('@babel/plugin-transform-class-properties'), options['class-properties'] || {}],
[
require('@babel/plugin-proposal-object-rest-spread'),
require('@babel/plugin-transform-object-rest-spread'),
{
useBuiltIns: true,
},
Expand Down Expand Up @@ -172,8 +172,8 @@ export default (api: any, options: NextBabelPresetOptions = {}): BabelPreset =>
isServer && require('@babel/plugin-syntax-bigint'),
// Always compile numeric separator because the resulting number is
// smaller.
require('@babel/plugin-proposal-numeric-separator'),
require('@babel/plugin-proposal-export-namespace-from'),
require('@babel/plugin-transform-numeric-separator'),
require('@babel/plugin-transform-export-namespace-from'),
].filter(Boolean),
};
};
Loading

0 comments on commit 4ba3c3f

Please sign in to comment.