Skip to content

Commit

Permalink
Export applicationConfig decorator and adjust documentation for usage
Browse files Browse the repository at this point in the history
  • Loading branch information
valentinpalkovic committed Mar 31, 2023
1 parent 3d9544f commit 31700c0
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 27 deletions.
30 changes: 25 additions & 5 deletions MIGRATION.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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:
Expand Down
32 changes: 15 additions & 17 deletions code/frameworks/angular/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/angular/src/client/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 },
},
Expand All @@ -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],
},
Expand Down

0 comments on commit 31700c0

Please sign in to comment.