Release: Prerelease 8.0.0-alpha.3

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,13 +3,15 @@
 - [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)
     - [UI layout state has changed shape](#ui-layout-state-has-changed-shape)
     - [New UI and props for Button and IconButton components](#new-ui-and-props-for-button-and-iconbutton-components)
     - [Icons is deprecated](#icons-is-deprecated)
     - [React-docgen component analysis by default](#react-docgen-component-analysis-by-default)
+    - [Removed postinstall](#removed-postinstall)
   - [Framework-specific changes](#framework-specific-changes)
     - [Angular: Drop support for Angular \< 15](#angular-drop-support-for-angular--15)
     - [Next.js: Drop support for version \< 13.5](#nextjs-drop-support-for-version--135)
@@ -379,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:
@@ -463,6 +469,10 @@ export default {
 
 For more information see: https://storybook.js.org/docs/react/api/main-config-typescript#reactdocgen
 
+#### Removed postinstall
+
+We removed the `@storybook/postinstall` package, which provided some utilities for addons to programmatically modify user configuration files on install. This package was years out of date, so this should be a non-disruptive change. If your addon used the package, you can view the old source code [here](https://github.com/storybookjs/storybook/tree/release-7-5/code/lib/postinstall) and adapt it into your addon.
+
 ### Framework-specific changes
 
 #### Angular: Drop support for Angular \< 15

code/addons/docs/ember/README.md

@@ -51,7 +51,7 @@ Next, add the following to your `.storybook/preview.js` to load the generated js
 
 ```js
 import { setJSONDoc } from '@storybook/addon-docs/ember';
-import docJson from '../storybook-docgen/index.json';
+import docJson from '../dist/storybook-docgen/index.json';
 setJSONDoc(docJson);
 ```
 

code/addons/docs/package.json

@@ -83,7 +83,6 @@
     "ember/**/*",
     "html/**/*",
     "svelte/**/*",
-    "postinstall/**/*",
     "react/**/*",
     "vue/**/*",
     "web-components/**/*",
@@ -108,7 +107,6 @@
     "@storybook/global": "^5.0.0",
     "@storybook/mdx2-csf": "^1.0.0",
     "@storybook/node-logger": "workspace:*",
-    "@storybook/postinstall": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/react-dom-shim": "workspace:*",
     "@storybook/theming": "workspace:*",

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/e2e-tests/json-files.spec.ts

@@ -23,7 +23,7 @@ test.describe('JSON files', () => {
       entries: expect.objectContaining({
         'example-button--primary': expect.objectContaining({
           id: 'example-button--primary',
-          importPath: expect.stringContaining('Button.stories'),
+          importPath: expect.stringMatching(/button\.stories/i),
           name: 'Primary',
           title: 'Example/Button',
           type: 'story',

code/frameworks/angular/package.json

@@ -111,7 +111,7 @@
     }
   },
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.0.0"
   },
   "publishConfig": {
     "access": "public"

code/frameworks/angular/template/cli/button.component.ts

@@ -3,6 +3,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'storybook-button',
+  standalone: true,
   imports: [CommonModule],
   template: ` <button
     type="button"
@@ -14,7 +15,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
   </button>`,
   styleUrls: ['./button.css'],
 })
-export default class ButtonComponent {
+export class ButtonComponent {
   /**
    * Is this the principal call to action on the page?
    */

code/frameworks/angular/template/cli/Button.stories.ts → code/frameworks/angular/template/cli/button.stories.ts

@@ -1,12 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import Button from './button.component';
+
+import { ButtonComponent } from './button.component';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const meta: Meta<Button> = {
+const meta: Meta<ButtonComponent> = {
   title: 'Example/Button',
-  component: Button,
+  component: ButtonComponent,
   tags: ['autodocs'],
-  render: (args: Button) => ({
+  render: (args: ButtonComponent) => ({
     props: {
       backgroundColor: null,
       ...args,
@@ -20,7 +21,7 @@ const meta: Meta<Button> = {
 };
 
 export default meta;
-type Story = StoryObj<Button>;
+type Story = StoryObj<ButtonComponent>;
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary: Story = {

code/frameworks/angular/template/cli/header.component.ts

@@ -1,8 +1,13 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import type { User } from './User';
+import { CommonModule } from '@angular/common';
+
+import { ButtonComponent } from './button.component';
+import type { User } from './user';
 
 @Component({
   selector: 'storybook-header',
+  standalone: true,
+  imports: [CommonModule, ButtonComponent],
   template: `<header>
     <div class="storybook-header">
       <div>
@@ -47,9 +52,8 @@ import type { User } from './User';
           ></storybook-button>
           <storybook-button
             *ngIf="!user"
-            primary
             size="small"
-            primary="true"
+            [primary]="true"
             class="margin-left"
             (onClick)="onCreateAccount.emit($event)"
             label="Sign up"
@@ -60,7 +64,7 @@ import type { User } from './User';
   </header>`,
   styleUrls: ['./header.css'],
 })
-export default class HeaderComponent {
+export class HeaderComponent {
   @Input()
   user: User | null = null;
 

code/frameworks/angular/template/cli/Header.stories.ts → code/frameworks/angular/template/cli/header.stories.ts

@@ -1,30 +1,20 @@
-import { moduleMetadata } from '@storybook/angular';
 import type { Meta, StoryObj } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
 
-import Button from './button.component';
-import Header from './header.component';
+import { HeaderComponent } from './header.component';
 
-const meta: Meta<Header> = {
+const meta: Meta<HeaderComponent> = {
   title: 'Example/Header',
-  component: Header,
+  component: HeaderComponent,
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  render: (args) => ({ props: args }),
-  decorators: [
-    moduleMetadata({
-      declarations: [Button],
-      imports: [CommonModule],
-    }),
-  ],
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
   },
 };
 
 export default meta;
-type Story = StoryObj<Header>;
+type Story = StoryObj<HeaderComponent>;
 
 export const LoggedIn: Story = {
   args: {

code/frameworks/angular/template/cli/page.component.ts

@@ -1,8 +1,13 @@
 import { Component } from '@angular/core';
-import type { User } from './User';
+import { CommonModule } from '@angular/common';
+
+import { HeaderComponent } from './header.component';
+import type { User } from './user';
 
 @Component({
   selector: 'storybook-page',
+  standalone: true,
+  imports: [CommonModule, HeaderComponent],
   template: `<article>
     <storybook-header
       [user]="user"
@@ -60,7 +65,7 @@ import type { User } from './User';
   </article>`,
   styleUrls: ['./page.css'],
 })
-export default class PageComponent {
+export class PageComponent {
   user: User | null = null;
 
   doLogout() {

code/frameworks/angular/template/cli/Page.stories.ts → code/frameworks/angular/template/cli/page.stories.ts

@@ -1,41 +1,24 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
 import { within, userEvent, expect } from '@storybook/test';
 
-import Button from './button.component';
-import Header from './header.component';
-import Page from './page.component';
+import { PageComponent } from './page.component';
 
-const meta: Meta<Page> = {
+const meta: Meta<PageComponent> = {
   title: 'Example/Page',
-  component: Page,
+  component: PageComponent,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
   },
-  decorators: [
-    moduleMetadata({
-      declarations: [Button, Header],
-      imports: [CommonModule],
-    }),
-  ],
 };
 
 export default meta;
-type Story = StoryObj<Page>;
+type Story = StoryObj<PageComponent>;
 
-export const LoggedOut: Story = {
-  render: (args: Page) => ({
-    props: args,
-  }),
-};
+export const LoggedOut: Story = {};
 
 // More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
 export const LoggedIn: Story = {
-  render: (args: Page) => ({
-    props: args,
-  }),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const loginButton = canvas.getByRole('button', { name: /Log in/i });

code/frameworks/angular/template/cli/user.ts

@@ -0,0 +1,3 @@
+export interface User {
+  name: string;
+}

code/frameworks/ember/package.json

@@ -38,6 +38,7 @@
     "@storybook/global": "^5.0.0",
     "@storybook/preview-api": "workspace:*",
     "@storybook/types": "workspace:*",
+    "find-up": "^5.0.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
@@ -46,13 +47,14 @@
   },
   "peerDependencies": {
     "@babel/core": "*",
-    "@types/ember__component": "4.0.8",
-    "babel-plugin-ember-modules-api-polyfill": "^2.12.0",
-    "babel-plugin-htmlbars-inline-precompile": "2 || 3",
-    "ember-source": "~3.28.1"
+    "babel-plugin-ember-modules-api-polyfill": "^3.5.0",
+    "babel-plugin-htmlbars-inline-precompile": "^5.3.1",
+    "ember-source": "~3.28.1 || ^4.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.0.0"
   },
   "publishConfig": {
     "access": "public"

code/frameworks/ember/src/client/preview/config.ts

@@ -1,3 +1,5 @@
+import './globals';
+
 export { renderToCanvas } from './render';
 
 export const parameters = { renderer: 'ember' as const };