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 = {