Merge pull request #21851 from storybookjs/valentin/export-applicatio…

…n-config-decorator

Export applicationConfig decorator and adjust documentation for usage

MIGRATION.md

@@ -31,7 +31,7 @@
     - [Addon-a11y: Removed deprecated withA11y decorator](#addon-a11y-removed-deprecated-witha11y-decorator)
   - [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)
@@ -77,7 +77,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)
     - [parameters.docs.source.excludeDecorators defaults to true](#parametersdocssourceexcludedecorators-defaults-to-true)
   - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes)
     - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default)
@@ -940,16 +940,36 @@ For example, if you want to configure BrowserAnimationModule in your stories, pl
 ```js
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { importProvidersFrom } from '@angular/core';
-import { applicationConfig } from '@storybook/angular';
+import { applicationConfig, Meta, StoryObj } from '@storybook/angular';
+import {ExampleComponent} from './example.component';
 
-export default {
+const meta: Meta = {
   title: 'Example',
+  component: ExampleComponent,
   decorators: [
+    // Define application-wide providers with the applicationConfig decorator
     applicationConfig({
-      providers: [importProvidersFrom(BrowserAnimationsModule)],
+      providers: [
+        importProvidersFrom(BrowserAnimationsModule),
+        // Extract all providers (and nested ones) from a ModuleWithProviders
+        importProvidersFrom(SomeOtherModule.forRoot()),
+      ],
     }
   ],
 };
+
+export default meta;
+
+type Story = StoryObj<typeof ExampleComponent>
+
+export const Default: Story = {
+  render: () => ({
+    // Define application-wide providers directly in the render function
+    applicationConfig: {
+      providers: [importProvidersFrom(BrowserAnimationsModule)],
+    }
+  }),
+};
 ```
 
 You can also use the `provide-style` decorator to provide an application-wide service:

code/frameworks/angular/README.md

@@ -209,16 +209,16 @@ WithCustomProvider.decorators = [
 
 ## applicationConfig decorator
 
-If your component relies on application-wide providers, like the ones defined by BrowserAnimationsModule or any other modules which use the forRoot pattern to provide a ModuleWithProviders, you can use the applicationConfig decorator to provide them to the [bootstrapApplication function](https://angular.io/guide/standalone-components#configuring-dependency-injection), which we use to bootstrap the component in Storybook.
+If your component relies on application-wide providers, like the ones defined by BrowserAnimationsModule or any other modules which use the forRoot pattern to provide a ModuleWithProviders, you can use the applicationConfig decorator on the meta default export to provide them to the [bootstrapApplication function](https://angular.io/guide/standalone-components#configuring-dependency-injection), which we use to bootstrap the component in Storybook.
 
 ```js
 
-import { StoryFn, Meta, applicationConfig } from '@storybook/angular';
+import { StoryObj, Meta, applicationConfig } from '@storybook/angular';
 import { BrowserAnimationsModule, provideAnimations } from '@angular/platform-browser/animations';
 import { importProvidersFrom } from '@angular/core';
 import { ChipsModule } from './angular-src/chips.module';
 
-export default {
+const meta: Meta = {
   component: ChipsGroupComponent,
   decorators: [
     // Apply application config to all stories
@@ -233,23 +233,21 @@ export default {
       ],
     }),
   ],
-} as Meta;
+};
 
-const Template = (): StoryFn => (args) => ({
-  props: args,
-});
+export default meta;
 
-export const Base = Template();
+type Story = StoryObj<typeof ChipsGroupComponent>;
 
-export const WithCustomApplicationProvider = Template();
-
-WithCustomApplicationProvider.decorators = [
-  // Apply application config to a specific story
-  // The configuration will not be merged with the global configuration defined in the export default block
-  applicationConfig({
-    providers: [...]
-  }),
-];
+export const WithCustomApplicationProvider: Story = {
+  render: () => ({
+    // Apply application config to a specific story
+    applicationConfig: {
+      // The providers will be merged with the ones defined in the applicationConfig decorators providers array of the global meta object
+      providers: [...]
+    }
+  })
+}
 ```
 
 ## FAQ

code/frameworks/angular/src/client/index.ts

@@ -9,7 +9,7 @@ export * from './public-types';
 
 export type { StoryFnAngularReturnType as IStory } from './types';
 
-export { moduleMetadata, componentWrapperDecorator } from './decorators';
+export { moduleMetadata, componentWrapperDecorator, applicationConfig } from './decorators';
 
 // optimization: stop HMR propagation in webpack
 module?.hot?.decline();

code/frameworks/angular/template/stories/core/applicationConfig/with-browser-animations.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/angular';
+import { Meta, StoryObj, applicationConfig } from '@storybook/angular';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { within, userEvent } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
@@ -7,6 +7,11 @@ import { OpenCloseComponent } from '../moduleMetadata/angular-src/open-close-com
 
 const meta: Meta = {
   component: OpenCloseComponent,
+  decorators: [
+    applicationConfig({
+      providers: [importProvidersFrom(BrowserAnimationsModule)],
+    }),
+  ],
   parameters: {
     chromatic: { delay: 100 },
   },
@@ -19,9 +24,6 @@ type Story = StoryObj<typeof OpenCloseComponent>;
 export const WithBrowserAnimations: Story = {
   render: () => ({
     template: `<app-open-close></app-open-close>`,
-    applicationConfig: {
-      providers: [importProvidersFrom(BrowserAnimationsModule)],
-    },
     moduleMetadata: {
       declarations: [OpenCloseComponent],
     },