@storybook/angular 7.0.0-beta.32 → 7.0.0-beta.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/client/angular-beta/AbstractRenderer.js +10 -1
- package/package.json +37 -36
- package/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.css +13 -0
- package/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.html +7 -0
- package/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.ts +39 -0
- package/template/stories/core/moduleMetadata/with-browser-animations.stories.ts +30 -0
|
@@ -27,6 +27,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
27
27
|
exports.AbstractRenderer = void 0;
|
|
28
28
|
const core_1 = require("@angular/core");
|
|
29
29
|
const platform_browser_1 = require("@angular/platform-browser");
|
|
30
|
+
const animations_1 = require("@angular/platform-browser/animations");
|
|
30
31
|
const rxjs_1 = require("rxjs");
|
|
31
32
|
const telejson_1 = require("telejson");
|
|
32
33
|
const StorybookModule_1 = require("./StorybookModule");
|
|
@@ -71,6 +72,11 @@ class AbstractRenderer {
|
|
|
71
72
|
async render({ storyFnAngular, forced, parameters, component, targetDOMNode, }) {
|
|
72
73
|
const targetSelector = this.generateTargetSelectorFromStoryId(targetDOMNode.id);
|
|
73
74
|
const newStoryProps$ = new rxjs_1.BehaviorSubject(storyFnAngular.props);
|
|
75
|
+
const hasAnimationsDefined = !!storyFnAngular.moduleMetadata?.imports?.includes(animations_1.BrowserAnimationsModule);
|
|
76
|
+
if (hasAnimationsDefined && storyFnAngular?.moduleMetadata?.imports) {
|
|
77
|
+
// eslint-disable-next-line no-param-reassign
|
|
78
|
+
storyFnAngular.moduleMetadata.imports = storyFnAngular.moduleMetadata.imports.filter((importedModule) => importedModule !== animations_1.BrowserAnimationsModule);
|
|
79
|
+
}
|
|
74
80
|
if (!this.fullRendererRequired({
|
|
75
81
|
storyFnAngular,
|
|
76
82
|
moduleMetadata: {
|
|
@@ -89,7 +95,10 @@ class AbstractRenderer {
|
|
|
89
95
|
this.initAngularRootElement(targetDOMNode, targetSelector);
|
|
90
96
|
const application = (0, StorybookModule_1.getApplication)({ storyFnAngular, component, targetSelector });
|
|
91
97
|
const applicationRef = await (0, platform_browser_1.bootstrapApplication)(application, {
|
|
92
|
-
providers: [
|
|
98
|
+
providers: [
|
|
99
|
+
(0, StorybookProvider_1.storyPropsProvider)(newStoryProps$),
|
|
100
|
+
...(hasAnimationsDefined ? [(0, animations_1.provideAnimations)()] : []),
|
|
101
|
+
],
|
|
93
102
|
});
|
|
94
103
|
applicationRefs.add(applicationRef);
|
|
95
104
|
await this.afterFullRender();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/angular",
|
|
3
|
-
"version": "7.0.0-beta.
|
|
3
|
+
"version": "7.0.0-beta.33",
|
|
4
4
|
"description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook",
|
|
@@ -36,20 +36,20 @@
|
|
|
36
36
|
"prep": "../../../scripts/prepare/tsc.ts"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@storybook/builder-webpack5": "7.0.0-beta.
|
|
40
|
-
"@storybook/cli": "7.0.0-beta.
|
|
41
|
-
"@storybook/client-logger": "7.0.0-beta.
|
|
42
|
-
"@storybook/core-client": "7.0.0-beta.
|
|
43
|
-
"@storybook/core-common": "7.0.0-beta.
|
|
44
|
-
"@storybook/core-events": "7.0.0-beta.
|
|
45
|
-
"@storybook/core-server": "7.0.0-beta.
|
|
46
|
-
"@storybook/core-webpack": "7.0.0-beta.
|
|
47
|
-
"@storybook/docs-tools": "7.0.0-beta.
|
|
39
|
+
"@storybook/builder-webpack5": "7.0.0-beta.33",
|
|
40
|
+
"@storybook/cli": "7.0.0-beta.33",
|
|
41
|
+
"@storybook/client-logger": "7.0.0-beta.33",
|
|
42
|
+
"@storybook/core-client": "7.0.0-beta.33",
|
|
43
|
+
"@storybook/core-common": "7.0.0-beta.33",
|
|
44
|
+
"@storybook/core-events": "7.0.0-beta.33",
|
|
45
|
+
"@storybook/core-server": "7.0.0-beta.33",
|
|
46
|
+
"@storybook/core-webpack": "7.0.0-beta.33",
|
|
47
|
+
"@storybook/docs-tools": "7.0.0-beta.33",
|
|
48
48
|
"@storybook/global": "^5.0.0",
|
|
49
|
-
"@storybook/manager-api": "7.0.0-beta.
|
|
50
|
-
"@storybook/node-logger": "7.0.0-beta.
|
|
51
|
-
"@storybook/preview-api": "7.0.0-beta.
|
|
52
|
-
"@storybook/types": "7.0.0-beta.
|
|
49
|
+
"@storybook/manager-api": "7.0.0-beta.33",
|
|
50
|
+
"@storybook/node-logger": "7.0.0-beta.33",
|
|
51
|
+
"@storybook/preview-api": "7.0.0-beta.33",
|
|
52
|
+
"@storybook/types": "7.0.0-beta.33",
|
|
53
53
|
"@types/node": "^16.0.0",
|
|
54
54
|
"@types/react": "^16.14.34",
|
|
55
55
|
"@types/react-dom": "^16.9.14",
|
|
@@ -67,16 +67,17 @@
|
|
|
67
67
|
},
|
|
68
68
|
"devDependencies": {
|
|
69
69
|
"@angular-devkit/architect": "^0.1500.4",
|
|
70
|
-
"@angular-devkit/build-angular": "^15.
|
|
71
|
-
"@angular-devkit/core": "^15.
|
|
72
|
-
"@angular/
|
|
73
|
-
"@angular/
|
|
74
|
-
"@angular/
|
|
75
|
-
"@angular/compiler
|
|
76
|
-
"@angular/
|
|
77
|
-
"@angular/
|
|
78
|
-
"@angular/
|
|
79
|
-
"@angular/platform-browser
|
|
70
|
+
"@angular-devkit/build-angular": "^15.1.1",
|
|
71
|
+
"@angular-devkit/core": "^15.1.1",
|
|
72
|
+
"@angular/animations": "^15.1.1",
|
|
73
|
+
"@angular/cli": "^15.1.1",
|
|
74
|
+
"@angular/common": "^15.1.1",
|
|
75
|
+
"@angular/compiler": "^15.1.1",
|
|
76
|
+
"@angular/compiler-cli": "^15.1.1",
|
|
77
|
+
"@angular/core": "^15.1.1",
|
|
78
|
+
"@angular/forms": "^15.1.1",
|
|
79
|
+
"@angular/platform-browser": "^15.1.1",
|
|
80
|
+
"@angular/platform-browser-dynamic": "^15.1.1",
|
|
80
81
|
"@types/rimraf": "^3.0.2",
|
|
81
82
|
"@types/tmp": "^0.2.3",
|
|
82
83
|
"cross-spawn": "^7.0.3",
|
|
@@ -90,17 +91,17 @@
|
|
|
90
91
|
"zone.js": "^0.12.0"
|
|
91
92
|
},
|
|
92
93
|
"peerDependencies": {
|
|
93
|
-
"@angular-devkit/architect": ">=0.1400.0",
|
|
94
|
-
"@angular-devkit/build-angular": ">=14.0.0",
|
|
95
|
-
"@angular-devkit/core": ">=14.0.0",
|
|
96
|
-
"@angular/cli": ">=14.0.0",
|
|
97
|
-
"@angular/common": ">=14.0.0",
|
|
98
|
-
"@angular/compiler": ">=14.0.0",
|
|
99
|
-
"@angular/compiler-cli": ">=14.0.0",
|
|
100
|
-
"@angular/core": ">=14.0.0",
|
|
101
|
-
"@angular/forms": ">=14.0.0",
|
|
102
|
-
"@angular/platform-browser": ">=14.0.0",
|
|
103
|
-
"@angular/platform-browser-dynamic": ">=14.0.0",
|
|
94
|
+
"@angular-devkit/architect": ">=0.1400.0 < 0.1600.0",
|
|
95
|
+
"@angular-devkit/build-angular": ">=14.1.0 < 16.0.0",
|
|
96
|
+
"@angular-devkit/core": ">=14.1.0 < 16.0.0",
|
|
97
|
+
"@angular/cli": ">=14.1.0 < 16.0.0",
|
|
98
|
+
"@angular/common": ">=14.1.0 < 16.0.0",
|
|
99
|
+
"@angular/compiler": ">=14.1.0 < 16.0.0",
|
|
100
|
+
"@angular/compiler-cli": ">=14.1.0 < 16.0.0",
|
|
101
|
+
"@angular/core": ">=14.1.0 < 16.0.0",
|
|
102
|
+
"@angular/forms": ">=14.1.0 < 16.0.0",
|
|
103
|
+
"@angular/platform-browser": ">=14.1.0 < 16.0.0",
|
|
104
|
+
"@angular/platform-browser-dynamic": ">=14.1.0 < 16.0.0",
|
|
104
105
|
"@babel/core": "*",
|
|
105
106
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
106
107
|
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
@@ -123,5 +124,5 @@
|
|
|
123
124
|
"bundler": {
|
|
124
125
|
"tsConfig": "tsconfig.build.json"
|
|
125
126
|
},
|
|
126
|
-
"gitHead": "
|
|
127
|
+
"gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7"
|
|
127
128
|
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { Component } from '@angular/core';
|
|
2
|
+
// eslint-disable-next-line import/no-extraneous-dependencies
|
|
3
|
+
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
4
|
+
|
|
5
|
+
@Component({
|
|
6
|
+
selector: 'app-open-close',
|
|
7
|
+
animations: [
|
|
8
|
+
trigger('openClose', [
|
|
9
|
+
// ...
|
|
10
|
+
state(
|
|
11
|
+
'open',
|
|
12
|
+
style({
|
|
13
|
+
height: '200px',
|
|
14
|
+
opacity: 1,
|
|
15
|
+
backgroundColor: 'yellow',
|
|
16
|
+
})
|
|
17
|
+
),
|
|
18
|
+
state(
|
|
19
|
+
'closed',
|
|
20
|
+
style({
|
|
21
|
+
height: '100px',
|
|
22
|
+
opacity: 0.8,
|
|
23
|
+
backgroundColor: 'blue',
|
|
24
|
+
})
|
|
25
|
+
),
|
|
26
|
+
transition('open => closed', [animate('0.1s')]),
|
|
27
|
+
transition('closed => open', [animate('0.1s')]),
|
|
28
|
+
]),
|
|
29
|
+
],
|
|
30
|
+
templateUrl: 'open-close.component.html',
|
|
31
|
+
styleUrls: ['open-close.component.css'],
|
|
32
|
+
})
|
|
33
|
+
export class OpenCloseComponent {
|
|
34
|
+
isOpen = true;
|
|
35
|
+
|
|
36
|
+
toggle() {
|
|
37
|
+
this.isOpen = !this.isOpen;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { Meta, StoryFn } from '@storybook/angular';
|
|
2
|
+
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|
3
|
+
import { within, userEvent } from '@storybook/testing-library';
|
|
4
|
+
import { expect } from '@storybook/jest';
|
|
5
|
+
import { OpenCloseComponent } from './angular-src/open-close-component/open-close.component';
|
|
6
|
+
|
|
7
|
+
export default {
|
|
8
|
+
component: OpenCloseComponent,
|
|
9
|
+
parameters: {
|
|
10
|
+
chromatic: { delay: 100 },
|
|
11
|
+
},
|
|
12
|
+
} as Meta;
|
|
13
|
+
|
|
14
|
+
export const WithBrowserAnimations: StoryFn = () => ({
|
|
15
|
+
template: `<app-open-close></app-open-close>`,
|
|
16
|
+
moduleMetadata: {
|
|
17
|
+
declarations: [OpenCloseComponent],
|
|
18
|
+
imports: [BrowserAnimationsModule],
|
|
19
|
+
},
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
WithBrowserAnimations.play = async ({ canvasElement }) => {
|
|
23
|
+
const canvas = within(canvasElement);
|
|
24
|
+
const opened = canvas.getByText('The box is now Open!');
|
|
25
|
+
expect(opened).toBeDefined();
|
|
26
|
+
const submitButton = canvas.getByRole('button');
|
|
27
|
+
await userEvent.click(submitButton);
|
|
28
|
+
const closed = canvas.getByText('The box is now Closed!');
|
|
29
|
+
expect(closed).toBeDefined();
|
|
30
|
+
};
|