Merge branch 'next' into norbert/vitest-for-monorepo

CHANGELOG.prerelease.md

@@ -1,3 +1,12 @@
+## 8.0.0-alpha.3
+
+- Addon-docs: Fix storybook MDX check - [#24696](https://github.com/storybookjs/storybook/pull/24696), thanks [@shilman](https://github.com/shilman)!
+- Addons: Remove unused postinstall package - [#25150](https://github.com/storybookjs/storybook/pull/25150), thanks [@shilman](https://github.com/shilman)!
+- Angular: Update Angular cli templates - [#25152](https://github.com/storybookjs/storybook/pull/25152), thanks [@Marklb](https://github.com/Marklb)!
+- Blocks: Fix Subtitle block for unattached docs pages - [#25157](https://github.com/storybookjs/storybook/pull/25157), thanks [@kripod](https://github.com/kripod)!
+- Ember: Fix @storybook/ember - [#23435](https://github.com/storybookjs/storybook/pull/23435), thanks [@francois2metz](https://github.com/francois2metz)!
+- Maintenance: Set engines field to Node.js >= 18 for packages - [#25105](https://github.com/storybookjs/storybook/pull/25105), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+
 ## 8.0.0-alpha.2
 
 - Core: Maintenance changes for NextJS embedding - [#25086](https://github.com/storybookjs/storybook/pull/25086), thanks [@shilman](https://github.com/shilman)!

MIGRATION.md

@@ -3,6 +3,7 @@
 - [From version 7.x to 8.0.0](#from-version-7x-to-800)
   - [Implicit actions can not be used during rendering (for example in the play function)](#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function)
   - [Core changes](#core-changes)
+    - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16)
     - [Autotitle breaking fixes](#autotitle-breaking-fixes)
     - [React v18 in the manager UI (including addons)](#react-v18-in-the-manager-ui-including-addons)
     - [Storyshots has been removed](#storyshots-has-been-removed)
@@ -380,6 +381,10 @@ To summarize:
 
 ### Core changes
 
+#### Dropping support for Node.js 16
+
+In Storybook 8, we have dropped Node.js 16 support since it reached end-of-life on 2023-09-11. Storybook 8 supports Node.js 18 and above.
+
 #### Autotitle breaking fixes
 
 In Storybook 7, the file name `path/to/foo.bar.stories.js` would result in the [autotitle](https://storybook.js.org/docs/react/configure/overview#configure-story-loading) `path/to/foo`. In 8.0, this has been changed to generate `path/to/foo.bar`. We consider this a bugfix but it is also a breaking change if you depended on the old behavior. To get the old titles, you can manually specify the desired title in the default export of your story file. For example:

code/addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",

code/addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",

code/addons/backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",

code/addons/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",

code/addons/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",

code/addons/docs/src/plugins/mdx-plugin.ts

@@ -5,7 +5,7 @@ import remarkExternalLinks from 'remark-external-links';
 import { createFilter } from '@rollup/pluginutils';
 import { dirname, join } from 'path';
 
-const isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith('story.mdx');
+const isStorybookMdx = (id: string) => id.endsWith('.stories.mdx') || id.endsWith('.story.mdx');
 
 /**
  * Storybook uses two different loaders when dealing with MDX:

code/addons/docs/template/stories/docs2/Title.mdx

@@ -1,7 +1,9 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta, Subtitle } from '@storybook/addon-docs';
 
 <Meta title="Yabbadabbadooo" />
 
 # Docs with title
 
+<Subtitle>Subtitle</Subtitle>
+
 hello docs

code/addons/essentials/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",

code/addons/gfm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",

code/addons/highlight/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",

code/addons/interactions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",

code/addons/jest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",

code/addons/links/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "addon",

code/addons/measure/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",

code/addons/outline/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",

code/addons/storysource/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",

code/addons/themes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "Switch between multiple themes for you components in Storybook",
   "keywords": [
     "css",

code/addons/toolbars/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",

code/addons/viewport/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",

code/builders/builder-manager/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-manager",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "Storybook manager builder",
   "keywords": [
     "storybook"

code/builders/builder-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-vite",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "A plugin to run and build Storybooks with Vite",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
   "bugs": {

code/builders/builder-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"

code/frameworks/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -110,7 +110,7 @@
     }
   },
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.0.0"
   },
   "publishConfig": {
     "access": "public"

code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts

@@ -3,7 +3,8 @@ import { bootstrapApplication } from '@angular/platform-browser';
 
 import { BehaviorSubject, Subject } from 'rxjs';
 import { stringify } from 'telejson';
-import { ICollection, Parameters, StoryFnAngularReturnType } from '../types';
+
+import { ICollection, StoryFnAngularReturnType } from '../types';
 import { getApplication } from './StorybookModule';
 import { storyPropsProvider } from './StorybookProvider';
 import { componentNgModules } from './StorybookWrapperComponent';
@@ -16,6 +17,14 @@ type StoryRenderInfo = {
 
 const applicationRefs = new Map<HTMLElement, ApplicationRef>();
 
+/**
+ * Attribute name for the story UID that may be written to the targetDOMNode.
+ *
+ * If a target DOM node has a story UID attribute, it will be used as part of
+ * the selector for the Angular component.
+ */
+export const STORY_UID_ATTRIBUTE = 'data-sb-story-uid';
+
 export abstract class AbstractRenderer {
   /**
    * Wait and destroy the platform
@@ -122,10 +131,17 @@ export abstract class AbstractRenderer {
 
     const analyzedMetadata = new PropertyExtractor(storyFnAngular.moduleMetadata, component);
 
+    const storyUid = targetDOMNode.getAttribute(STORY_UID_ATTRIBUTE);
+    const componentSelector = storyUid !== null ? `${targetSelector}[${storyUid}]` : targetSelector;
+    if (storyUid !== null) {
+      const element = targetDOMNode.querySelector(targetSelector);
+      element.toggleAttribute(storyUid, true);
+    }
+
     const application = getApplication({
       storyFnAngular,
       component,
-      targetSelector,
+      targetSelector: componentSelector,
       analyzedMetadata,
     });
 
@@ -161,8 +177,10 @@ export abstract class AbstractRenderer {
     return storyIdIsInvalidHtmlTagName ? `sb-${id.replace(invalidHtmlTag, '')}-component` : id;
   }
 
+  /**
+   * Adds DOM element that angular will use as bootstrap component.
+   */
   protected initAngularRootElement(targetDOMNode: HTMLElement, targetSelector: string) {
-    // Adds DOM element that angular will use as bootstrap component
     // eslint-disable-next-line no-param-reassign
     targetDOMNode.innerHTML = '';
     targetDOMNode.appendChild(document.createElement(targetSelector));

code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts

@@ -1,6 +1,8 @@
 import { addons } from '@storybook/preview-api';
 import { DOCS_RENDERED, STORY_CHANGED } from '@storybook/core-events';
-import { AbstractRenderer } from './AbstractRenderer';
+
+import { getNextStoryUID } from './utils/StoryUID';
+import { AbstractRenderer, STORY_UID_ATTRIBUTE } from './AbstractRenderer';
 import { StoryFnAngularReturnType, Parameters } from '../types';
 
 export class DocsRenderer extends AbstractRenderer {
@@ -45,4 +47,13 @@ export class DocsRenderer extends AbstractRenderer {
   async afterFullRender(): Promise<void> {
     await AbstractRenderer.resetCompiledComponents();
   }
+
+  protected override initAngularRootElement(
+    targetDOMNode: HTMLElement,
+    targetSelector: string
+  ): void {
+    super.initAngularRootElement(targetDOMNode, targetSelector);
+
+    targetDOMNode.setAttribute(STORY_UID_ATTRIBUTE, getNextStoryUID(targetDOMNode.id));
+  }
 }

code/frameworks/angular/src/client/angular-beta/RendererFactory.test.ts

@@ -14,11 +14,13 @@ describe('RendererFactory', () => {
   let rendererFactory: RendererFactory;
   let rootTargetDOMNode: HTMLElement;
   let rootDocstargetDOMNode: HTMLElement;
+  let storyInDocstargetDOMNode: HTMLElement;
 
   beforeEach(async () => {
     rendererFactory = new RendererFactory();
     document.body.innerHTML =
-      '<div id="storybook-root"></div><div id="root-docs"><div id="story-in-docs"></div></div>';
+      '<div id="storybook-root"></div><div id="root-docs"><div id="story-in-docs"></div></div>' +
+      '<div id="storybook-docs"></div>';
     rootTargetDOMNode = global.document.getElementById('storybook-root');
     rootDocstargetDOMNode = global.document.getElementById('root-docs');
     (platformBrowserDynamic as any).mockImplementation(platformBrowserDynamicTesting);
@@ -181,5 +183,47 @@ describe('RendererFactory', () => {
       const render = await rendererFactory.getRendererInstance(rootDocstargetDOMNode);
       expect(render).toBeInstanceOf(DocsRenderer);
     });
+
+    describe('when multiple story for the same component', () => {
+      it('should render both stories', async () => {
+        @Component({ selector: 'foo', template: '🦊' })
+        class FooComponent {}
+
+        const render = await rendererFactory.getRendererInstance(
+          global.document.getElementById('storybook-docs')
+        );
+
+        const targetDOMNode1 = global.document.createElement('div');
+        targetDOMNode1.id = 'story-1';
+        global.document.getElementById('storybook-docs').appendChild(targetDOMNode1);
+        await render?.render({
+          storyFnAngular: {
+            props: {},
+          },
+          forced: false,
+          component: FooComponent,
+          targetDOMNode: targetDOMNode1,
+        });
+
+        const targetDOMNode2 = global.document.createElement('div');
+        targetDOMNode2.id = 'story-1';
+        global.document.getElementById('storybook-docs').appendChild(targetDOMNode2);
+        await render?.render({
+          storyFnAngular: {
+            props: {},
+          },
+          forced: false,
+          component: FooComponent,
+          targetDOMNode: targetDOMNode2,
+        });
+
+        expect(global.document.querySelectorAll('#story-1 > story-1')[0].innerHTML).toBe(
+          '<foo>🦊</foo><!--container-->'
+        );
+        expect(global.document.querySelectorAll('#story-1 > story-1')[1].innerHTML).toBe(
+          '<foo>🦊</foo><!--container-->'
+        );
+      });
+    });
   });
 });