From 81fe6de6488c35ce8e17e3932b8b307c5cf032e1 Mon Sep 17 00:00:00 2001
From: Yngve Bakken-Nilsen
Date: Tue, 3 Aug 2021 14:28:57 +0200
Subject: [PATCH 1/5] add global CSF3 renderer for Angular
---
app/angular/src/client/preview/index.ts | 9 ++++--
examples/angular-cli/.storybook/main.js | 3 ++
.../stories/csf3/input-with-play.stories.ts | 28 +++++++++++++++++++
.../src/stories/csf3/sb-input.component.ts | 7 +++++
4 files changed, 44 insertions(+), 3 deletions(-)
create mode 100644 examples/angular-cli/src/stories/csf3/input-with-play.stories.ts
create mode 100644 examples/angular-cli/src/stories/csf3/sb-input.component.ts
diff --git a/app/angular/src/client/preview/index.ts b/app/angular/src/client/preview/index.ts
index 1f36d485fecf..1d2a37d1d31e 100644
--- a/app/angular/src/client/preview/index.ts
+++ b/app/angular/src/client/preview/index.ts
@@ -1,11 +1,11 @@
/* eslint-disable prefer-destructuring */
-import { RenderStoryFunction, start } from '@storybook/core/client';
import { ClientStoryApi, Loadable } from '@storybook/addons';
-
+import { RenderStoryFunction, start } from '@storybook/core/client';
+import decorateStory from './decorateStory';
import './globals';
import render from './render';
-import decorateStory from './decorateStory';
import { IStorybookSection, StoryFnAngularReturnType } from './types';
+import { Story } from './types-6-0';
const framework = 'angular';
@@ -19,8 +19,11 @@ interface ClientApi extends ClientStoryApi {
load: (...args: any[]) => void;
}
+const globalRender: Story = (props) => ({ props });
+
const api = start((render as any) as RenderStoryFunction, { decorateStory });
+api.clientApi.globalRender = globalRender;
export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
return (api.clientApi.storiesOf(kind, m) as ReturnType).addParameters({
framework,
diff --git a/examples/angular-cli/.storybook/main.js b/examples/angular-cli/.storybook/main.js
index c494920d567f..1e0f9c3459b1 100644
--- a/examples/angular-cli/.storybook/main.js
+++ b/examples/angular-cli/.storybook/main.js
@@ -19,6 +19,9 @@ module.exports = {
angularOptions: {
enableIvy: true,
},
+ features: {
+ previewCsfV3: true,
+ },
// These are just here to test composition. They could be added to any storybook example project
refs: {
first: {
diff --git a/examples/angular-cli/src/stories/csf3/input-with-play.stories.ts b/examples/angular-cli/src/stories/csf3/input-with-play.stories.ts
new file mode 100644
index 000000000000..53ad6b44356c
--- /dev/null
+++ b/examples/angular-cli/src/stories/csf3/input-with-play.stories.ts
@@ -0,0 +1,28 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { InputComponent } from './sb-input.component';
+
+export default {
+ title: 'CSF3/Input',
+ component: InputComponent,
+};
+
+export const Default = {
+ title: 'Default',
+ play: async () => {
+ const input = await screen.getByAltText('sb-input');
+ await userEvent.type(input, `Typing from CSF3`);
+ },
+};
+
+export const WithTemplate = {
+ title: 'Template',
+ render: (props) => ({
+ props,
+ template: 'Heading
',
+ }),
+ play: async () => {
+ const input = await screen.getByAltText('sb-input');
+ await userEvent.type(input, `Typing from CSF3`);
+ },
+};
diff --git a/examples/angular-cli/src/stories/csf3/sb-input.component.ts b/examples/angular-cli/src/stories/csf3/sb-input.component.ts
new file mode 100644
index 000000000000..403e240e9c9b
--- /dev/null
+++ b/examples/angular-cli/src/stories/csf3/sb-input.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'sb-input',
+ template: ``,
+})
+export class InputComponent {}
From 70823db1abe388eeacb35a4b0a432e66acd28c60 Mon Sep 17 00:00:00 2001
From: Yngve Bakken-Nilsen
Date: Tue, 3 Aug 2021 15:45:59 +0200
Subject: [PATCH 2/5] update compodoc snapshot
---
.../doc-button/compodoc.snapshot | 84 +++++++++----------
1 file changed, 42 insertions(+), 42 deletions(-)
diff --git a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc.snapshot b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc.snapshot
index 3a1d7700b665..68c4c17bf536 100644
--- a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc.snapshot
+++ b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc.snapshot
@@ -132,7 +132,7 @@ like bold, italic, and inline code
.
"name": "click",
},
],
- "id": "component-InputComponent-568feeafa68e593b062061c27c4625a9",
+ "id": "component-InputComponent-fd2eff3e4da750f1c06d4928670993b3",
"inputs": Array [],
"inputsClass": Array [
Object {
@@ -207,78 +207,78 @@ like bold, italic, and inline code
.
"jsdoctags": Array [
Object {
"atToken": Object {
- "end": 859,
+ "end": 896,
"flags": 0,
"kind": 57,
- "pos": 858,
+ "pos": 895,
},
"comment": "Hello world",
- "end": 866,
+ "end": 903,
"flags": 0,
"kind": 288,
- "pos": 858,
+ "pos": 895,
"tagName": Object {
- "end": 865,
+ "end": 902,
"escapedText": "string",
"flags": 0,
- "pos": 859,
+ "pos": 896,
},
},
Object {
"atToken": Object {
- "end": 882,
+ "end": 920,
"flags": 0,
"kind": 57,
- "pos": 881,
+ "pos": 919,
},
"comment": "[Example](http://example.com)",
- "end": 887,
+ "end": 925,
"flags": 0,
"kind": 288,
- "pos": 881,
+ "pos": 919,
"tagName": Object {
- "end": 886,
+ "end": 924,
"escapedText": "link",
"flags": 0,
- "pos": 882,
+ "pos": 920,
},
},
Object {
"atToken": Object {
- "end": 921,
+ "end": 960,
"flags": 0,
"kind": 57,
- "pos": 920,
+ "pos": 959,
},
"comment": "\`ThingThing\`",
- "end": 926,
+ "end": 965,
"flags": 0,
"kind": 288,
- "pos": 920,
+ "pos": 959,
"tagName": Object {
- "end": 925,
+ "end": 964,
"escapedText": "code",
"flags": 0,
- "pos": 921,
+ "pos": 960,
},
},
Object {
"atToken": Object {
- "end": 943,
+ "end": 983,
"flags": 0,
"kind": 57,
- "pos": 942,
+ "pos": 982,
},
"comment": "aaa",
- "end": 948,
+ "end": 988,
"flags": 0,
"kind": 288,
- "pos": 942,
+ "pos": 982,
"tagName": Object {
- "end": 947,
+ "end": 987,
"escapedText": "html",
"flags": 0,
- "pos": 943,
+ "pos": 983,
},
},
],
@@ -301,16 +301,16 @@ like bold, italic, and inline code
.
"comment": "Some number you'd like to use.
",
"name": Object {
- "end": 3518,
+ "end": 3678,
"escapedText": "x",
"flags": 0,
- "pos": 3517,
+ "pos": 3677,
},
"tagName": Object {
- "end": 3516,
+ "end": 3676,
"escapedText": "param",
"flags": 0,
- "pos": 3511,
+ "pos": 3671,
},
"type": "number",
},
@@ -318,16 +318,16 @@ like bold, italic, and inline code
.
"comment": "Some other number or string you'd like to use, will have parseInt()
applied before calculation.
",
"name": Object {
- "end": 3563,
+ "end": 3724,
"escapedText": "y",
"flags": 0,
- "pos": 3562,
+ "pos": 3723,
},
"tagName": Object {
- "end": 3561,
+ "end": 3722,
"escapedText": "param",
"flags": 0,
- "pos": 3556,
+ "pos": 3717,
},
"type": "string | number",
},
@@ -355,16 +355,16 @@ like bold, italic, and inline code
.
"comment": "Some password
.
",
"name": Object {
- "end": 4079,
+ "end": 4263,
"escapedText": "password",
"flags": 0,
- "pos": 4071,
+ "pos": 4255,
},
"tagName": Object {
- "end": 4070,
+ "end": 4254,
"escapedText": "param",
"flags": 0,
- "pos": 4065,
+ "pos": 4249,
},
"type": "string",
},
@@ -393,17 +393,17 @@ like bold, italic, and inline code
.
"comment": "Some id
.
",
"name": Object {
- "end": 3938,
+ "end": 4113,
"escapedText": "id",
"flags": 0,
- "pos": 3936,
+ "pos": 4111,
},
"optional": true,
"tagName": Object {
- "end": 3935,
+ "end": 4110,
"escapedText": "param",
"flags": 0,
- "pos": 3930,
+ "pos": 4105,
},
"type": "number",
},
@@ -773,7 +773,7 @@ export class InputComponent {
"interfaces": Array [
Object {
"file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
- "id": "interface-ISomeInterface-568feeafa68e593b062061c27c4625a9",
+ "id": "interface-ISomeInterface-fd2eff3e4da750f1c06d4928670993b3",
"indexSignatures": Array [],
"kind": 150,
"methods": Array [],
From ce1b4ecb9276f4e79864c939e0fdde878e675e99 Mon Sep 17 00:00:00 2001
From: Yngve Bakken-Nilsen
Date: Tue, 3 Aug 2021 19:24:11 +0200
Subject: [PATCH 3/5] improve naming of csf3 story
---
.../src/stories/{ => preview}/csf3/input-with-play.stories.ts | 2 +-
.../src/stories/{ => preview}/csf3/sb-input.component.ts | 0
2 files changed, 1 insertion(+), 1 deletion(-)
rename examples/angular-cli/src/stories/{ => preview}/csf3/input-with-play.stories.ts (94%)
rename examples/angular-cli/src/stories/{ => preview}/csf3/sb-input.component.ts (100%)
diff --git a/examples/angular-cli/src/stories/csf3/input-with-play.stories.ts b/examples/angular-cli/src/stories/preview/csf3/input-with-play.stories.ts
similarity index 94%
rename from examples/angular-cli/src/stories/csf3/input-with-play.stories.ts
rename to examples/angular-cli/src/stories/preview/csf3/input-with-play.stories.ts
index 53ad6b44356c..1beef36d7479 100644
--- a/examples/angular-cli/src/stories/csf3/input-with-play.stories.ts
+++ b/examples/angular-cli/src/stories/preview/csf3/input-with-play.stories.ts
@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
import { InputComponent } from './sb-input.component';
export default {
- title: 'CSF3/Input',
+ title: 'Preview/CSF3/WithPlayFunction',
component: InputComponent,
};
diff --git a/examples/angular-cli/src/stories/csf3/sb-input.component.ts b/examples/angular-cli/src/stories/preview/csf3/sb-input.component.ts
similarity index 100%
rename from examples/angular-cli/src/stories/csf3/sb-input.component.ts
rename to examples/angular-cli/src/stories/preview/csf3/sb-input.component.ts
From 1ecfdeac6a5bf68e2fc1c6aaeeaea2271048618e Mon Sep 17 00:00:00 2001
From: ThibaudAv
Date: Thu, 5 Aug 2021 16:02:08 +0200
Subject: [PATCH 4/5] fix: angular-properties.test.ts test
---
.../doc-button/compodoc.snapshot | 84 +++++++++----------
1 file changed, 42 insertions(+), 42 deletions(-)
diff --git a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc.snapshot b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc.snapshot
index 68c4c17bf536..3a1d7700b665 100644
--- a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc.snapshot
+++ b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc.snapshot
@@ -132,7 +132,7 @@ like bold, italic, and inline code
.
"name": "click",
},
],
- "id": "component-InputComponent-fd2eff3e4da750f1c06d4928670993b3",
+ "id": "component-InputComponent-568feeafa68e593b062061c27c4625a9",
"inputs": Array [],
"inputsClass": Array [
Object {
@@ -207,78 +207,78 @@ like bold, italic, and inline code
.
"jsdoctags": Array [
Object {
"atToken": Object {
- "end": 896,
+ "end": 859,
"flags": 0,
"kind": 57,
- "pos": 895,
+ "pos": 858,
},
"comment": "Hello world",
- "end": 903,
+ "end": 866,
"flags": 0,
"kind": 288,
- "pos": 895,
+ "pos": 858,
"tagName": Object {
- "end": 902,
+ "end": 865,
"escapedText": "string",
"flags": 0,
- "pos": 896,
+ "pos": 859,
},
},
Object {
"atToken": Object {
- "end": 920,
+ "end": 882,
"flags": 0,
"kind": 57,
- "pos": 919,
+ "pos": 881,
},
"comment": "[Example](http://example.com)",
- "end": 925,
+ "end": 887,
"flags": 0,
"kind": 288,
- "pos": 919,
+ "pos": 881,
"tagName": Object {
- "end": 924,
+ "end": 886,
"escapedText": "link",
"flags": 0,
- "pos": 920,
+ "pos": 882,
},
},
Object {
"atToken": Object {
- "end": 960,
+ "end": 921,
"flags": 0,
"kind": 57,
- "pos": 959,
+ "pos": 920,
},
"comment": "\`ThingThing\`",
- "end": 965,
+ "end": 926,
"flags": 0,
"kind": 288,
- "pos": 959,
+ "pos": 920,
"tagName": Object {
- "end": 964,
+ "end": 925,
"escapedText": "code",
"flags": 0,
- "pos": 960,
+ "pos": 921,
},
},
Object {
"atToken": Object {
- "end": 983,
+ "end": 943,
"flags": 0,
"kind": 57,
- "pos": 982,
+ "pos": 942,
},
"comment": "aaa",
- "end": 988,
+ "end": 948,
"flags": 0,
"kind": 288,
- "pos": 982,
+ "pos": 942,
"tagName": Object {
- "end": 987,
+ "end": 947,
"escapedText": "html",
"flags": 0,
- "pos": 983,
+ "pos": 943,
},
},
],
@@ -301,16 +301,16 @@ like bold, italic, and inline code
.
"comment": "Some number you'd like to use.
",
"name": Object {
- "end": 3678,
+ "end": 3518,
"escapedText": "x",
"flags": 0,
- "pos": 3677,
+ "pos": 3517,
},
"tagName": Object {
- "end": 3676,
+ "end": 3516,
"escapedText": "param",
"flags": 0,
- "pos": 3671,
+ "pos": 3511,
},
"type": "number",
},
@@ -318,16 +318,16 @@ like bold, italic, and inline code
.
"comment": "Some other number or string you'd like to use, will have parseInt()
applied before calculation.
",
"name": Object {
- "end": 3724,
+ "end": 3563,
"escapedText": "y",
"flags": 0,
- "pos": 3723,
+ "pos": 3562,
},
"tagName": Object {
- "end": 3722,
+ "end": 3561,
"escapedText": "param",
"flags": 0,
- "pos": 3717,
+ "pos": 3556,
},
"type": "string | number",
},
@@ -355,16 +355,16 @@ like bold, italic, and inline code
.
"comment": "Some password
.
",
"name": Object {
- "end": 4263,
+ "end": 4079,
"escapedText": "password",
"flags": 0,
- "pos": 4255,
+ "pos": 4071,
},
"tagName": Object {
- "end": 4254,
+ "end": 4070,
"escapedText": "param",
"flags": 0,
- "pos": 4249,
+ "pos": 4065,
},
"type": "string",
},
@@ -393,17 +393,17 @@ like bold, italic, and inline code
.
"comment": "Some id
.
",
"name": Object {
- "end": 4113,
+ "end": 3938,
"escapedText": "id",
"flags": 0,
- "pos": 4111,
+ "pos": 3936,
},
"optional": true,
"tagName": Object {
- "end": 4110,
+ "end": 3935,
"escapedText": "param",
"flags": 0,
- "pos": 4105,
+ "pos": 3930,
},
"type": "number",
},
@@ -773,7 +773,7 @@ export class InputComponent {
"interfaces": Array [
Object {
"file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
- "id": "interface-ISomeInterface-fd2eff3e4da750f1c06d4928670993b3",
+ "id": "interface-ISomeInterface-568feeafa68e593b062061c27c4625a9",
"indexSignatures": Array [],
"kind": 150,
"methods": Array [],
From 37bbe90922199db38508e4871c2c9edc3e645aa1 Mon Sep 17 00:00:00 2001
From: ThibaudAv
Date: Thu, 5 Aug 2021 16:08:15 +0200
Subject: [PATCH 5/5] fix: disable storyshots for CSF3 sotry example
---
.../src/stories/preview/csf3/input-with-play.stories.ts | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/examples/angular-cli/src/stories/preview/csf3/input-with-play.stories.ts b/examples/angular-cli/src/stories/preview/csf3/input-with-play.stories.ts
index 1beef36d7479..1a1f810cee9e 100644
--- a/examples/angular-cli/src/stories/preview/csf3/input-with-play.stories.ts
+++ b/examples/angular-cli/src/stories/preview/csf3/input-with-play.stories.ts
@@ -5,6 +5,10 @@ import { InputComponent } from './sb-input.component';
export default {
title: 'Preview/CSF3/WithPlayFunction',
component: InputComponent,
+ parameters: {
+ // disabled : Not compatible yet with csf3
+ storyshots: { disable: true },
+ },
};
export const Default = {