diff --git a/.circleci/config.yml b/.circleci/config.yml index 4c2259b2591c..a36a4a18aef7 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -658,19 +658,19 @@ workflows: requires: - build - create-sandboxes: - parallelism: 17 + parallelism: 18 requires: - build - build-sandboxes: - parallelism: 17 + parallelism: 18 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 17 + parallelism: 18 requires: - build-sandboxes - e2e-production: - parallelism: 17 + parallelism: 18 requires: - build-sandboxes - e2e-dev: @@ -678,7 +678,7 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 17 + parallelism: 18 requires: - build-sandboxes # TODO: reenable once we find out the source of flakyness diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 23a8f37bfaa4..d319a540c376 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -27,6 +27,15 @@ jobs: run: working-directory: scripts steps: + - name: Cancel if [skip ci] + if: contains(github.event.head_commit.message, '[skip ci]') + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + # From https://stackoverflow.com/a/75809743 + run: | + gh run cancel ${{ github.run_id }} + gh run watch ${{ github.run_id }} + - name: Checkout ${{ github.ref_name }} uses: actions/checkout@v3 with: @@ -71,7 +80,7 @@ jobs: git config --global user.name "storybook-bot" git config --global user.email "32066757+storybook-bot@users.noreply.github.com" git add . - git commit -m "Bump version from $CURRENT_VERSION to $DEFERRED_NEXT_VERSION" || true + git commit -m "Bump version from $CURRENT_VERSION to $DEFERRED_NEXT_VERSION [skip ci]" || true git push origin ${{ github.ref_name }} - name: Get current version @@ -149,7 +158,7 @@ jobs: git pull git checkout origin/main ./CHANGELOG.md git add ./CHANGELOG.md - git commit -m "Update CHANGELOG.md for v${{ steps.version.outputs.current-version }}" + git commit -m "Update CHANGELOG.md for v${{ steps.version.outputs.current-version }} [skip ci]" git push origin next - name: Sync versions/next.json from `next` to `main` diff --git a/CHANGELOG.md b/CHANGELOG.md index a1a4ffe241db..ff8db19d50dd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## 7.0.28 + +- Telemetry: Add globals usage to project.json - [#23431](https://github.com/storybookjs/storybook/pull/23431), thanks [@shilman](https://github.com/shilman)! + ## 7.0.27 - Angular: Enable prod mode when Storybook is built - [#23404](https://github.com/storybookjs/storybook/pull/23404), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! diff --git a/code/frameworks/nextjs/template/stories/Image.stories.jsx b/code/frameworks/nextjs/template/stories/Image.stories.jsx index bf3808282a6f..ea5dea79a79e 100644 --- a/code/frameworks/nextjs/template/stories/Image.stories.jsx +++ b/code/frameworks/nextjs/template/stories/Image.stories.jsx @@ -1,5 +1,6 @@ import React from 'react'; import Image from 'next/image'; +import { waitFor } from '@storybook/testing-library'; import StackAlt from '../../assets/colors.svg'; @@ -28,6 +29,11 @@ export const BlurredAbsolutePlaceholder = { 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABP5JREFUWEeNlwtz2zgMhEGKsv/k9XFp82xe11763yOJVGcXC4m2czM3GYa0E2s/LACSTi+vv1czM/7CvPpqxY/ejPeS3khmFiPHOiVLHKaZi4ux4j18GpMlS6cALupEQBCKQM4BdnGzjIcJgs//QBxAPQAem55f3yL4PWJIdyCyhlMfPdYZot0cwj3Ayg/5JwHA13paen7pADphxr/n5VI8JQsHCCGQ3gVGLLsxQ3h/LYSn5383B05rwNOws3Z576LOTOduvwfrOd5FtVat4akx0uPTrw8BNuUz23vLsY7hmg7i4ipqM2saiAdruNuirh4ff0bNdb3Qy3vkvfAQwrkHoDxTTZtDCOKrC1bMEkdnsQh/PLyetOGHkXeRAgQAQ84efQcBdUhvFofoulpdm9WGGTA+AJEe7l+i37a2c371tCFKs5zzJjxQNBMi1im7OCudP2aNghJuzZaGdSMEZjpwf/t0UgNdg9DOyLGLnY0BUHlzwVtNDkgEQhBeKkb1tUDgQrq7frwAiIJi5BKAeIFgHk5mOpPzvgltOfcoK0Rrs7lWHwsgqtXarK3N0u23h5Ne8+3Cqxn5RYSMfHCAMgDAx4CBWlA9RAGw0GA/ol0gvFB4WjAvBAFUa83SzdUdAbYMqp28uHpxCRefxwAYhksAFBlthxCiXig+zT4TYqkC+Hq7OdAfJv8lPpZiZShWBBIuRP+jspDb2lwcDkzz7OLzbO/zvAHAoXTz5eYMQL0t2yHAiCFcfPY1QDwNFylA5bPoFpsV9fsEiMl8dhcc4PP1CYD3drYcBYdIKQrx0cbRxd2JHSDcQ297/vvoZ5smRC+AyV2AQ+nm03evge08Tyy4jGqXzWWEoIvTgXHU38pWiNgH4ixB/ukAcy/xycXfp4kwdAAAt399W+OCgMjxILQacxvRQ3gEwHgKUIr/rz53CuDFNyP/Eob4+/vEWkBq6AAA/HIi62n/Lk67Q7wDYQ0UpQB7hc54T4E6gACLTYxeAwB0YKZL6U4ATEGIBwCs7qPfQJCCHkCnoK50noJKcXcAojsEAJZZKXhgCoziGKxqWV8IMNp4kP2aC+oB0TMFvhGxDQHQfIPhDrilwKOm/YCZASAHfgBABQjr3f7CyAkA0cPB03AQULRhKd4xAIjzHymo2Gp7gN0FAMAVOoA2fPz03a9ssh/RM7Iz8QKIzYF9HyB0XEZ1xJ4DzNoDOAfAslhDDTyjDfv8A2AcBeCiu/jBHQEgxnYW6Kp6BlCVAkQM8VnieF2Xyr0ivXy+XvsCzKOihwNHCCryw8HrQXVB8dgFeRfAVQiXjMbIIgXINQYB2H7Kf5wF/2Ar7h0AgKKGuAP4zOjhzlkLbpcRXKRZhNUjxG6HIQDOjN47gCn4+fWW3xVS9urPESEEwwHMo9IhAGxS2ISiA1iEnQOoA4hXRAwItp7WzL9Ow18ESJaw/ar4NgeOR49cAHCAnaH8swBhv+6CBGjeBSxEOUAI7HyKHkD4O9xKb3/feQouAI4uLBciHRRHmgbfA7h/xFc9AngNBADthvii1sMOiPwDAFeyt6s7FSFS4PmnA1v0vQvqDqQKAAPE/weAUuEgsj8c+H11Twdw/AKANXA82EDr5cJBEEzB3oI4Mb0AdR3nNw8vQnegWuvqAABwJFJEBwDgNdA7IOs3gL0LhuJdwBY8c4BfNnDdVgooHiOqn/b7JoSW/QODjTHXhU7hMQAAAABJRU5ErkJggg==', placeholder: 'blur', }, + parameters: { + // ignoring in Chromatic to avoid inconsistent snapshots + // given that the switch from blur to image is quite fast + chromatic: { disableSnapshot: true }, + }, }; export const FilledParent = { @@ -63,6 +69,25 @@ export const Lazy = { ), ], + loaders: [ + async () => { + // make sure we start at the top to test the scrolling into view functionality every time the story renders + // eslint-disable-next-line no-undef + window.scrollTo({ top: 0 }); + await new Promise((res) => { + setTimeout(res, 16); + }); + return {}; + }, + ], + play: async ({ canvasElement, step }) => { + await step('scroll image into view', () => { + canvasElement.scrollIntoView(false); + }); + await step('wait for images to load', async () => { + await waitFor(waitForImagesToLoad); + }); + }, }; export const Eager = { @@ -75,3 +100,19 @@ export const Eager = { }, }, }; + +async function waitForImagesToLoad() { + // eslint-disable-next-line no-undef + const images = Array.from(document.getElementsByTagName('img')); + + await Promise.all( + images.map((image) => { + if (image.complete) { + return Promise.resolve(); + } + return new Promise((resolve) => { + image.addEventListener('load', resolve); + }); + }) + ); +} diff --git a/code/frameworks/nextjs/template/stories_nextjs-12-js/ImageFuture.stories.jsx b/code/frameworks/nextjs/template/stories_nextjs-12-js/ImageFuture.stories.jsx index 3c65960d585d..7aa804471973 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-12-js/ImageFuture.stories.jsx +++ b/code/frameworks/nextjs/template/stories_nextjs-12-js/ImageFuture.stories.jsx @@ -28,6 +28,11 @@ export const BlurredAbsolutePlaceholder = { 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABP5JREFUWEeNlwtz2zgMhEGKsv/k9XFp82xe11763yOJVGcXC4m2czM3GYa0E2s/LACSTi+vv1czM/7CvPpqxY/ejPeS3khmFiPHOiVLHKaZi4ux4j18GpMlS6cALupEQBCKQM4BdnGzjIcJgs//QBxAPQAem55f3yL4PWJIdyCyhlMfPdYZot0cwj3Ayg/5JwHA13paen7pADphxr/n5VI8JQsHCCGQ3gVGLLsxQ3h/LYSn5383B05rwNOws3Z576LOTOduvwfrOd5FtVat4akx0uPTrw8BNuUz23vLsY7hmg7i4ipqM2saiAdruNuirh4ff0bNdb3Qy3vkvfAQwrkHoDxTTZtDCOKrC1bMEkdnsQh/PLyetOGHkXeRAgQAQ84efQcBdUhvFofoulpdm9WGGTA+AJEe7l+i37a2c371tCFKs5zzJjxQNBMi1im7OCudP2aNghJuzZaGdSMEZjpwf/t0UgNdg9DOyLGLnY0BUHlzwVtNDkgEQhBeKkb1tUDgQrq7frwAiIJi5BKAeIFgHk5mOpPzvgltOfcoK0Rrs7lWHwsgqtXarK3N0u23h5Ne8+3Cqxn5RYSMfHCAMgDAx4CBWlA9RAGw0GA/ol0gvFB4WjAvBAFUa83SzdUdAbYMqp28uHpxCRefxwAYhksAFBlthxCiXig+zT4TYqkC+Hq7OdAfJv8lPpZiZShWBBIuRP+jspDb2lwcDkzz7OLzbO/zvAHAoXTz5eYMQL0t2yHAiCFcfPY1QDwNFylA5bPoFpsV9fsEiMl8dhcc4PP1CYD3drYcBYdIKQrx0cbRxd2JHSDcQ297/vvoZ5smRC+AyV2AQ+nm03evge08Tyy4jGqXzWWEoIvTgXHU38pWiNgH4ixB/ukAcy/xycXfp4kwdAAAt399W+OCgMjxILQacxvRQ3gEwHgKUIr/rz53CuDFNyP/Eob4+/vEWkBq6AAA/HIi62n/Lk67Q7wDYQ0UpQB7hc54T4E6gACLTYxeAwB0YKZL6U4ATEGIBwCs7qPfQJCCHkCnoK50noJKcXcAojsEAJZZKXhgCoziGKxqWV8IMNp4kP2aC+oB0TMFvhGxDQHQfIPhDrilwKOm/YCZASAHfgBABQjr3f7CyAkA0cPB03AQULRhKd4xAIjzHymo2Gp7gN0FAMAVOoA2fPz03a9ssh/RM7Iz8QKIzYF9HyB0XEZ1xJ4DzNoDOAfAslhDDTyjDfv8A2AcBeCiu/jBHQEgxnYW6Kp6BlCVAkQM8VnieF2Xyr0ivXy+XvsCzKOihwNHCCryw8HrQXVB8dgFeRfAVQiXjMbIIgXINQYB2H7Kf5wF/2Ar7h0AgKKGuAP4zOjhzlkLbpcRXKRZhNUjxG6HIQDOjN47gCn4+fWW3xVS9urPESEEwwHMo9IhAGxS2ISiA1iEnQOoA4hXRAwItp7WzL9Ow18ESJaw/ar4NgeOR49cAHCAnaH8swBhv+6CBGjeBSxEOUAI7HyKHkD4O9xKb3/feQouAI4uLBciHRRHmgbfA7h/xFc9AngNBADthvii1sMOiPwDAFeyt6s7FSFS4PmnA1v0vQvqDqQKAAPE/weAUuEgsj8c+H11Twdw/AKANXA82EDr5cJBEEzB3oI4Mb0AdR3nNw8vQnegWuvqAABwJFJEBwDgNdA7IOs3gL0LhuJdwBY8c4BfNnDdVgooHiOqn/b7JoSW/QODjTHXhU7hMQAAAABJRU5ErkJggg==', placeholder: 'blur', }, + parameters: { + // ignoring in Chromatic to avoid inconsistent snapshots + // given that the switch from blur to image is quite fast + chromatic: { disableSnapshot: true }, + }, }; export const FilledParent = { diff --git a/code/package.json b/code/package.json index 13680a26b089..7689db0c97be 100644 --- a/code/package.json +++ b/code/package.json @@ -327,5 +327,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "7.0.28" } diff --git a/code/renderers/react/src/testing-api.ts b/code/renderers/react/src/testing-api.ts index 6d9d0dab3588..da061e64ef04 100644 --- a/code/renderers/react/src/testing-api.ts +++ b/code/renderers/react/src/testing-api.ts @@ -24,12 +24,12 @@ import type { ReactRenderer } from './types'; *```jsx * // setup.js (for jest) * import { setProjectAnnotations } from '@storybook/react'; - * import * as projectAnnotations from './.storybook/preview'; + * import projectAnnotations from './.storybook/preview'; * * setProjectAnnotations(projectAnnotations); *``` * - * @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview') + * @param projectAnnotations - e.g. (import projectAnnotations from '../.storybook/preview') */ export function setProjectAnnotations( projectAnnotations: ProjectAnnotations | ProjectAnnotations[] diff --git a/docs/configure/upgrading.md b/docs/configure/upgrading.md index 9cdc938cb03b..97b9d785fc20 100644 --- a/docs/configure/upgrading.md +++ b/docs/configure/upgrading.md @@ -37,9 +37,17 @@ In addition to running the command, we also recommend checking the [MIGRATION.md Storybook upgrades are not the only thing to consider: changes in the ecosystem also present challenges. For example, lots of frameworks ([Angular 12](https://angular.io/guide/updating-to-version-12#breaking-changes-in-angular-version-12), [Create React App v5](https://github.com/facebook/create-react-app/pull/11201), [NextJS](https://nextjs.org/docs/upgrading#webpack-5)) have recently migrated from [Webpack 4 to Webpack 5](https://webpack.js.org/migrate/5/), so even if you don't upgrade your Storybook version, you might need to update your configuration accordingly. That's what Automigrate is for: -``` -npx storybook@latest automigrate -``` + + + + + It runs a set of standard configuration checks, explains what is potentially out-of-date, and offers to fix it for you automatically. It also points to the relevant documentation so you can learn more. It runs automatically as part of [`storybook upgrade`](#upgrade-script) command, but it's also available on its own if you don't want to upgrade Storybook. @@ -55,6 +63,7 @@ To upgrade to the latest pre-release: paths={[ 'common/storybook-upgrade-prerelease.npm.js.mdx', 'common/storybook-upgrade-prerelease.pnpm.js.mdx', + 'common/storybook-upgrade-prerelease.yarn.js.mdx', ]} /> diff --git a/docs/snippets/common/storybook-automigrate.npm.js.mdx b/docs/snippets/common/storybook-automigrate.npm.js.mdx new file mode 100644 index 000000000000..6a5f7ebdbd5b --- /dev/null +++ b/docs/snippets/common/storybook-automigrate.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npx storybook@latest automigrate +``` diff --git a/docs/snippets/common/storybook-automigrate.pnpm.js.mdx b/docs/snippets/common/storybook-automigrate.pnpm.js.mdx new file mode 100644 index 000000000000..375ba9755861 --- /dev/null +++ b/docs/snippets/common/storybook-automigrate.pnpm.js.mdx @@ -0,0 +1,3 @@ +```shell +pnpm dlx storybook@latest automigrate +``` diff --git a/docs/snippets/common/storybook-automigrate.yarn.js.mdx b/docs/snippets/common/storybook-automigrate.yarn.js.mdx new file mode 100644 index 000000000000..67d30472ba9c --- /dev/null +++ b/docs/snippets/common/storybook-automigrate.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn dlx storybook@latest automigrate +``` diff --git a/docs/snippets/web-components/button-story-auto-docs.js.mdx b/docs/snippets/web-components/button-story-auto-docs.js.mdx index d2f2263f49be..c45b64d54fde 100644 --- a/docs/snippets/web-components/button-story-auto-docs.js.mdx +++ b/docs/snippets/web-components/button-story-auto-docs.js.mdx @@ -4,7 +4,7 @@ export default { component: 'custom-button', //👇 Enables auto-generated documentation for the component story - tags: ['docsPage'], + tags: ['autodocs'], argTypes: { backgroundColor: { control: 'color' }, }, diff --git a/docs/snippets/web-components/button-story-auto-docs.ts.mdx b/docs/snippets/web-components/button-story-auto-docs.ts.mdx index 5de4291cfd00..10bed84c1567 100644 --- a/docs/snippets/web-components/button-story-auto-docs.ts.mdx +++ b/docs/snippets/web-components/button-story-auto-docs.ts.mdx @@ -6,7 +6,7 @@ import type { Meta, StoryObj } from '@storybook/web-components'; const Meta: Meta = { component: 'custom-button', //👇 Enables auto-generated documentation for the component story - tags: ['docsPage'], + tags: ['autodocs'], argTypes: { backgroundColor: { control: 'color' }, }, diff --git a/docs/versions/latest.json b/docs/versions/latest.json index d183fb90ada2..eb128043364a 100644 --- a/docs/versions/latest.json +++ b/docs/versions/latest.json @@ -1 +1 @@ -{"version":"7.0.27","info":{"plain":"- Angular: Enable prod mode when Storybook is built - [#23404](https://github.com/storybookjs/storybook/pull/23404), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Angular: Fix esm issue in combination with rxjs v6 - [#23405](https://github.com/storybookjs/storybook/pull/23405), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- CLI: Exit when user does not select a storybook project type - [#23201](https://github.com/storybookjs/storybook/pull/23201), thanks [@yannbf](https://github.com/yannbf)!\n- Next.js: Fix `useParams` support - [#22946](https://github.com/storybookjs/storybook/pull/22946), thanks [@gitstart-storybook](https://github.com/gitstart-storybook)!\n- Next.js: Fix for @nx/react/plugin/storybook with SVGs - [#23210](https://github.com/storybookjs/storybook/pull/23210), thanks [@daves28](https://github.com/daves28)!\n- Svelte-Webpack: Support Svelte v4 - [#23336](https://github.com/storybookjs/storybook/pull/23336), thanks [@JReinhold](https://github.com/JReinhold)!"}} +{"version":"7.0.28","info":{"plain":"- Telemetry: Add globals usage to project.json - [#23431](https://github.com/storybookjs/storybook/pull/23431), thanks [@shilman](https://github.com/shilman)!"}} diff --git a/docs/versions/next.json b/docs/versions/next.json index fca74b676c4d..7599b057700d 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"7.1.0-rc.1","info":{"plain":"- Angular: Enable prod mode when Storybook is built - [#23404](https://github.com/storybookjs/storybook/pull/23404), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Angular: Fix esm issue in combination with rxjs v6 - [#23405](https://github.com/storybookjs/storybook/pull/23405), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- CLI: Fix chevron icon on Configure.mdx page - [#23397](https://github.com/storybookjs/storybook/pull/23397), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Settings: Fix dark mode for what's new page - [#23398](https://github.com/storybookjs/storybook/pull/23398), thanks [@kasperpeulen](https://github.com/kasperpeulen)!"}} +{"version":"7.1.0-rc.2","info":{"plain":"- CLI: Exit when user does not select a storybook project type - [#23201](https://github.com/storybookjs/storybook/pull/23201), thanks [@yannbf](https://github.com/yannbf)!\n- CLI: Fix Javascript language detection - [#23426](https://github.com/storybookjs/storybook/pull/23426), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Core: Fix onboarding detection in what's new module - [#23424](https://github.com/storybookjs/storybook/pull/23424), thanks [@yannbf](https://github.com/yannbf)!\n- Dependencies: Bump `@sveltejs/vite-plugin-svelte` - [#23233](https://github.com/storybookjs/storybook/pull/23233), thanks [@JReinhold](https://github.com/JReinhold)!\n- Telemetry: Add globals usage to project.json - [#23431](https://github.com/storybookjs/storybook/pull/23431), thanks [@shilman](https://github.com/shilman)!"}} diff --git a/docs/writing-docs/mdx.md b/docs/writing-docs/mdx.md index 093a6c78cbc1..1c71ca5b759e 100644 --- a/docs/writing-docs/mdx.md +++ b/docs/writing-docs/mdx.md @@ -2,6 +2,8 @@ title: 'MDX' --- + + [MDX](https://mdxjs.com/) files mix Markdown and Javascript/JSX to create rich interactive documentation. You can use Markdown’s readable syntax (such as `# heading`) for your documentation, include stories defined in [Component Story Format (CSF)](../api/csf.md), and freely embed JSX component blocks at any point in the file. All at once. In addition, you can write pure documentation pages in MDX and add them to Storybook alongside your stories.