From 84f92958195597ba2cce97c094a57e25687790ef Mon Sep 17 00:00:00 2001 From: Yngve Bakken-Nilsen Date: Tue, 3 Aug 2021 15:24:06 +0200 Subject: [PATCH 1/6] render source for custom angular template if it exists --- .../doc-button/compodoc.snapshot | 20 +++++++++--------- .../src/frameworks/angular/sourceDecorator.ts | 4 ++-- .../src/client/preview/decorateStory.ts | 5 +++-- app/angular/src/client/preview/types.ts | 1 + .../doc-button.stories.storyshot | 21 +++++++++++++++++++ .../docs/doc-button/doc-button.component.scss | 3 +++ .../docs/doc-button/doc-button.stories.ts | 6 ++++++ .../story-styles.stories.storyshot | 4 ++-- 8 files changed, 48 insertions(+), 16 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 17a268f1a31..e4abe617a6c 100644 --- a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc.snapshot +++ b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc.snapshot @@ -163,7 +163,7 @@ like bold, italic, and inline code.

"name": "click", }, ], - "id": "component-InputComponent-568feeafa68e593b062061c27c4625a9", + "id": "component-InputComponent-fd2eff3e4da750f1c06d4928670993b3", "inputs": Array [], "inputsClass": Array [ Object { @@ -332,7 +332,7 @@ like bold, italic, and inline code.

"deprecated": false, "deprecationMessage": "", "name": Object { - "end": 3518, + "end": 3678, "escapedText": "x", "flags": 4227072, "kind": 78, @@ -341,7 +341,7 @@ like bold, italic, and inline code.

"transformFlags": 0, }, "tagName": Object { - "end": 3516, + "end": 3676, "escapedText": "param", "flags": 4227072, "kind": 78, @@ -357,7 +357,7 @@ like bold, italic, and inline code.

"deprecated": false, "deprecationMessage": "", "name": Object { - "end": 3563, + "end": 3724, "escapedText": "y", "flags": 4227072, "kind": 78, @@ -366,7 +366,7 @@ like bold, italic, and inline code.

"transformFlags": 0, }, "tagName": Object { - "end": 3561, + "end": 3722, "escapedText": "param", "flags": 4227072, "kind": 78, @@ -445,7 +445,7 @@ An internal calculation method which adds \`x\` and \`y\` together. "deprecated": false, "deprecationMessage": "", "name": Object { - "end": 4079, + "end": 4263, "escapedText": "password", "flags": 4227072, "kind": 78, @@ -454,7 +454,7 @@ An internal calculation method which adds \`x\` and \`y\` together. "transformFlags": 0, }, "tagName": Object { - "end": 4070, + "end": 4254, "escapedText": "param", "flags": 4227072, "kind": 78, @@ -500,7 +500,7 @@ A private method. "deprecated": false, "deprecationMessage": "", "name": Object { - "end": 3938, + "end": 4113, "escapedText": "id", "flags": 4227072, "kind": 78, @@ -510,7 +510,7 @@ A private method. }, "optional": true, "tagName": Object { - "end": 3935, + "end": 4110, "escapedText": "param", "flags": 4227072, "kind": 78, @@ -945,7 +945,7 @@ export class InputComponent { "deprecated": false, "deprecationMessage": "", "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts", - "id": "interface-ISomeInterface-568feeafa68e593b062061c27c4625a9", + "id": "interface-ISomeInterface-fd2eff3e4da750f1c06d4928670993b3", "indexSignatures": Array [], "kind": 163, "methods": Array [], diff --git a/addons/docs/src/frameworks/angular/sourceDecorator.ts b/addons/docs/src/frameworks/angular/sourceDecorator.ts index c90556da202..4dd077034bd 100644 --- a/addons/docs/src/frameworks/angular/sourceDecorator.ts +++ b/addons/docs/src/frameworks/angular/sourceDecorator.ts @@ -36,13 +36,13 @@ export const sourceDecorator = (storyFn: StoryFn, context: StoryContext) return story; } const channel = addons.getChannel(); - const { props, template } = story; + const { props, template, hasCustomTemplate } = story; const { parameters: { component, argTypes }, } = context; - if (component) { + if (component && !hasCustomTemplate) { const source = computesTemplateSourceFromComponent(component, props, argTypes); // We might have a story with a Directive or Service defined as the component diff --git a/app/angular/src/client/preview/decorateStory.ts b/app/angular/src/client/preview/decorateStory.ts index 700c96a4427..2b78fd0c89d 100644 --- a/app/angular/src/client/preview/decorateStory.ts +++ b/app/angular/src/client/preview/decorateStory.ts @@ -1,6 +1,5 @@ import { DecoratorFunction, StoryContext, StoryFn } from '@storybook/addons'; import { computesTemplateFromComponent } from './angular-beta/ComputesTemplateFromComponent'; - import { StoryFnAngularReturnType } from './types'; const defaultContext: StoryContext = { @@ -43,13 +42,15 @@ const prepareMain = ( let { template } = story; const component = story.component ?? context.parameters.component; + const noTemplate = hasNoTemplate(template); - if (hasNoTemplate(template) && component) { + if (noTemplate && component) { template = computesTemplateFromComponent(component, story.props, ''); } return { ...story, ...(template ? { template } : {}), + hasCustomTemplate: !noTemplate, }; }; diff --git a/app/angular/src/client/preview/types.ts b/app/angular/src/client/preview/types.ts index 3a9d8a5320c..48e4c661f64 100644 --- a/app/angular/src/client/preview/types.ts +++ b/app/angular/src/client/preview/types.ts @@ -28,4 +28,5 @@ export interface StoryFnAngularReturnType { moduleMetadata?: NgModuleMetadata; template?: string; styles?: string[]; + hasCustomTemplate?: boolean; } diff --git a/examples/angular-cli/src/stories/addons/docs/doc-button/__snapshots__/doc-button.stories.storyshot b/examples/angular-cli/src/stories/addons/docs/doc-button/__snapshots__/doc-button.stories.storyshot index 33b6ae63d79..ce3bbdb1380 100644 --- a/examples/angular-cli/src/stories/addons/docs/doc-button/__snapshots__/doc-button.stories.storyshot +++ b/examples/angular-cli/src/stories/addons/docs/doc-button/__snapshots__/doc-button.stories.storyshot @@ -20,3 +20,24 @@ exports[`Storyshots Addons/Docs/DocButton Basic 1`] = ` `; + +exports[`Storyshots Addons/Docs/DocButton With Template 1`] = ` + + + + + +`; diff --git a/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.component.scss b/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.component.scss index e69de29bb2d..006601f5a82 100644 --- a/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.component.scss +++ b/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.component.scss @@ -0,0 +1,3 @@ +.btn-secondary { + background-color: #ff9899; +} diff --git a/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.stories.ts b/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.stories.ts index e6666a31f3b..6c5b2b69604 100644 --- a/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.stories.ts +++ b/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.stories.ts @@ -9,3 +9,9 @@ export const Basic = (args) => ({ props: args, }); Basic.args = { label: 'Args test', isDisabled: false }; + +export const WithTemplate = (args) => ({ + props: args, + template: '', +}); +WithTemplate.args = { label: 'Template test', appearance: 'secondary' }; diff --git a/examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot b/examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot index 7307da48a79..78692ce9fab 100644 --- a/examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot +++ b/examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot @@ -3,7 +3,7 @@ exports[`Storyshots Core / Story host styles With Args 1`] = ` @@ -19,7 +19,7 @@ exports[`Storyshots Core / Story host styles With Args 1`] = ` exports[`Storyshots Core / Story host styles With story template 1`] = ` From b1577905cbfc135bf9d40d4daa2bd964292315a0 Mon Sep 17 00:00:00 2001 From: Yngve Bakken-Nilsen Date: Tue, 3 Aug 2021 19:29:39 +0200 Subject: [PATCH 2/6] improve naming and returnstatement --- addons/docs/src/frameworks/angular/sourceDecorator.ts | 4 ++-- app/angular/src/client/preview/decorateStory.ts | 7 +++---- app/angular/src/client/preview/types.ts | 2 +- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/addons/docs/src/frameworks/angular/sourceDecorator.ts b/addons/docs/src/frameworks/angular/sourceDecorator.ts index 4dd077034bd..d5e3b1bd96d 100644 --- a/addons/docs/src/frameworks/angular/sourceDecorator.ts +++ b/addons/docs/src/frameworks/angular/sourceDecorator.ts @@ -36,13 +36,13 @@ export const sourceDecorator = (storyFn: StoryFn, context: StoryContext) return story; } const channel = addons.getChannel(); - const { props, template, hasCustomTemplate } = story; + const { props, template, userDefinedTemplate } = story; const { parameters: { component, argTypes }, } = context; - if (component && !hasCustomTemplate) { + if (component && !userDefinedTemplate) { const source = computesTemplateSourceFromComponent(component, props, argTypes); // We might have a story with a Directive or Service defined as the component diff --git a/app/angular/src/client/preview/decorateStory.ts b/app/angular/src/client/preview/decorateStory.ts index 2b78fd0c89d..3dfce316544 100644 --- a/app/angular/src/client/preview/decorateStory.ts +++ b/app/angular/src/client/preview/decorateStory.ts @@ -42,15 +42,14 @@ const prepareMain = ( let { template } = story; const component = story.component ?? context.parameters.component; - const noTemplate = hasNoTemplate(template); + const userDefinedTemplate = !hasNoTemplate(template); - if (noTemplate && component) { + if (!userDefinedTemplate && component) { template = computesTemplateFromComponent(component, story.props, ''); } return { ...story, - ...(template ? { template } : {}), - hasCustomTemplate: !noTemplate, + ...(template ? { template, userDefinedTemplate } : {}), }; }; diff --git a/app/angular/src/client/preview/types.ts b/app/angular/src/client/preview/types.ts index 48e4c661f64..f8829b60ae6 100644 --- a/app/angular/src/client/preview/types.ts +++ b/app/angular/src/client/preview/types.ts @@ -28,5 +28,5 @@ export interface StoryFnAngularReturnType { moduleMetadata?: NgModuleMetadata; template?: string; styles?: string[]; - hasCustomTemplate?: boolean; + userDefinedTemplate?: boolean; } From b07a7e9f6cd9ebf9a3278dc2f9a883059c072a8a Mon Sep 17 00:00:00 2001 From: Yngve Bakken-Nilsen Date: Mon, 9 Aug 2021 09:54:41 +0200 Subject: [PATCH 3/6] attempt to fix tests --- .../doc-button/compodoc.snapshot | 32 ++++++------- .../src/client/preview/decorateStory.test.ts | 8 ++++ .../welcome-storybook.stories.storyshot | 46 +++++++++---------- 3 files changed, 47 insertions(+), 39 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 e4abe617a6c..87b56182385 100644 --- a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc.snapshot +++ b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc.snapshot @@ -223,18 +223,18 @@ like bold, italic, and inline code.

"jsdoctags": Array [ Object { "comment": "", - "end": 1525, + "end": 1590, "flags": 4227072, "kind": 317, "modifierFlagsCache": 0, - "pos": 1512, + "pos": 1576, "tagName": Object { - "end": 1521, + "end": 1585, "escapedText": "required", "flags": 4227072, "kind": 78, "modifierFlagsCache": 0, - "pos": 1513, + "pos": 1577, "transformFlags": 0, }, "transformFlags": 0, @@ -282,18 +282,18 @@ like bold, italic, and inline code.

"jsdoctags": Array [ Object { "comment": "", - "end": 1802, + "end": 1882, "flags": 4227072, "kind": 321, "modifierFlagsCache": 0, - "pos": 1787, + "pos": 1866, "tagName": Object { - "end": 1798, + "end": 1877, "escapedText": "deprecated", "flags": 4227072, "kind": 78, "modifierFlagsCache": 0, - "pos": 1788, + "pos": 1867, "transformFlags": 0, }, "transformFlags": 0, @@ -337,7 +337,7 @@ like bold, italic, and inline code.

"flags": 4227072, "kind": 78, "modifierFlagsCache": 0, - "pos": 3517, + "pos": 3677, "transformFlags": 0, }, "tagName": Object { @@ -346,7 +346,7 @@ like bold, italic, and inline code.

"flags": 4227072, "kind": 78, "modifierFlagsCache": 0, - "pos": 3511, + "pos": 3671, "transformFlags": 0, }, "type": "number", @@ -362,7 +362,7 @@ like bold, italic, and inline code.

"flags": 4227072, "kind": 78, "modifierFlagsCache": 0, - "pos": 3562, + "pos": 3723, "transformFlags": 0, }, "tagName": Object { @@ -371,7 +371,7 @@ like bold, italic, and inline code.

"flags": 4227072, "kind": 78, "modifierFlagsCache": 0, - "pos": 3556, + "pos": 3717, "transformFlags": 0, }, "type": "string | number", @@ -450,7 +450,7 @@ An internal calculation method which adds \`x\` and \`y\` together. "flags": 4227072, "kind": 78, "modifierFlagsCache": 0, - "pos": 4071, + "pos": 4255, "transformFlags": 0, }, "tagName": Object { @@ -459,7 +459,7 @@ An internal calculation method which adds \`x\` and \`y\` together. "flags": 4227072, "kind": 78, "modifierFlagsCache": 0, - "pos": 4065, + "pos": 4249, "transformFlags": 0, }, "type": "string", @@ -505,7 +505,7 @@ A private method. "flags": 4227072, "kind": 78, "modifierFlagsCache": 0, - "pos": 3936, + "pos": 4111, "transformFlags": 0, }, "optional": true, @@ -515,7 +515,7 @@ A private method. "flags": 4227072, "kind": 78, "modifierFlagsCache": 0, - "pos": 3930, + "pos": 4105, "transformFlags": 0, }, "type": "number", diff --git a/app/angular/src/client/preview/decorateStory.test.ts b/app/angular/src/client/preview/decorateStory.test.ts index 52209bcaa95..664a30d8ba7 100644 --- a/app/angular/src/client/preview/decorateStory.test.ts +++ b/app/angular/src/client/preview/decorateStory.test.ts @@ -37,6 +37,7 @@ describe('decorateStory', () => { }, template: '', + userDefinedTemplate: true, }); }); @@ -75,6 +76,7 @@ describe('decorateStory', () => { }, template: '', + userDefinedTemplate: true, }); }); @@ -89,6 +91,7 @@ describe('decorateStory', () => { expect(decorated(makeContext({ parameters: { component: FooComponent } }))).toEqual({ template: '', + userDefinedTemplate: true, }); }); @@ -121,6 +124,7 @@ describe('decorateStory', () => { expect(decorated(makeContext({ parameters: { component: FooComponent } }))).toEqual({ template: '', + userDefinedTemplate: true, }); }); @@ -153,6 +157,7 @@ describe('decorateStory', () => { expect(decorated()).toEqual({ template: '', + userDefinedTemplate: true, }); }); @@ -185,6 +190,7 @@ describe('decorateStory', () => { expect(decorated(makeContext({ parameters: { component: FooComponent } }))).toEqual({ template: '', + userDefinedTemplate: false, }); }); @@ -218,6 +224,7 @@ describe('decorateStory', () => { template: '', component: FooComponent, + userDefinedTemplate: false, }); }); @@ -258,6 +265,7 @@ describe('decorateStory', () => { ) ).toEqual({ template: 'Args available in the story : withControl,withAction', + userDefinedTemplate: true, }); }); }); diff --git a/examples/angular-cli/src/stories/__snapshots__/welcome-storybook.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/welcome-storybook.stories.storyshot index 9e2b2d1a9a2..14354dba7ee 100644 --- a/examples/angular-cli/src/stories/__snapshots__/welcome-storybook.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/welcome-storybook.stories.storyshot @@ -3,47 +3,47 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `

Welcome to storybook

This is a UI component dev environment for your app.

We've added some basic stories inside the src/stories directory.
A story is a single state of one or more UI components. You can have as many stories as you want.
(Basically a story is like a visual test case.)

See these sample @@ -51,7 +51,7 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = ` for a component called Button @@ -59,26 +59,26 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = ` .

Just like that, you can add your own components as stories.
You can also edit those components and see changes right away.
(Try editing the Button stories located at src/stories/index.js @@ -86,15 +86,15 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = ` .)

Usually we create stories with smaller UI components in the app.
Have a look at the

NOTE:
Have a look at the .storybook/webpack.config.js From bb986945576a70a9b823ef4db733f8119a6039d2 Mon Sep 17 00:00:00 2001 From: Yngve Bakken-Nilsen Date: Mon, 9 Aug 2021 10:07:11 +0200 Subject: [PATCH 4/6] updqate compodoc snapshot --- .../doc-button/compodoc.snapshot | 52 +++++++++---------- 1 file changed, 26 insertions(+), 26 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 87b56182385..17a268f1a31 100644 --- a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc.snapshot +++ b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc.snapshot @@ -163,7 +163,7 @@ like bold, italic, and inline code.

"name": "click", }, ], - "id": "component-InputComponent-fd2eff3e4da750f1c06d4928670993b3", + "id": "component-InputComponent-568feeafa68e593b062061c27c4625a9", "inputs": Array [], "inputsClass": Array [ Object { @@ -223,18 +223,18 @@ like bold, italic, and inline code.

"jsdoctags": Array [ Object { "comment": "", - "end": 1590, + "end": 1525, "flags": 4227072, "kind": 317, "modifierFlagsCache": 0, - "pos": 1576, + "pos": 1512, "tagName": Object { - "end": 1585, + "end": 1521, "escapedText": "required", "flags": 4227072, "kind": 78, "modifierFlagsCache": 0, - "pos": 1577, + "pos": 1513, "transformFlags": 0, }, "transformFlags": 0, @@ -282,18 +282,18 @@ like bold, italic, and inline code.

"jsdoctags": Array [ Object { "comment": "", - "end": 1882, + "end": 1802, "flags": 4227072, "kind": 321, "modifierFlagsCache": 0, - "pos": 1866, + "pos": 1787, "tagName": Object { - "end": 1877, + "end": 1798, "escapedText": "deprecated", "flags": 4227072, "kind": 78, "modifierFlagsCache": 0, - "pos": 1867, + "pos": 1788, "transformFlags": 0, }, "transformFlags": 0, @@ -332,21 +332,21 @@ like bold, italic, and inline code.

"deprecated": false, "deprecationMessage": "", "name": Object { - "end": 3678, + "end": 3518, "escapedText": "x", "flags": 4227072, "kind": 78, "modifierFlagsCache": 0, - "pos": 3677, + "pos": 3517, "transformFlags": 0, }, "tagName": Object { - "end": 3676, + "end": 3516, "escapedText": "param", "flags": 4227072, "kind": 78, "modifierFlagsCache": 0, - "pos": 3671, + "pos": 3511, "transformFlags": 0, }, "type": "number", @@ -357,21 +357,21 @@ like bold, italic, and inline code.

"deprecated": false, "deprecationMessage": "", "name": Object { - "end": 3724, + "end": 3563, "escapedText": "y", "flags": 4227072, "kind": 78, "modifierFlagsCache": 0, - "pos": 3723, + "pos": 3562, "transformFlags": 0, }, "tagName": Object { - "end": 3722, + "end": 3561, "escapedText": "param", "flags": 4227072, "kind": 78, "modifierFlagsCache": 0, - "pos": 3717, + "pos": 3556, "transformFlags": 0, }, "type": "string | number", @@ -445,21 +445,21 @@ An internal calculation method which adds \`x\` and \`y\` together. "deprecated": false, "deprecationMessage": "", "name": Object { - "end": 4263, + "end": 4079, "escapedText": "password", "flags": 4227072, "kind": 78, "modifierFlagsCache": 0, - "pos": 4255, + "pos": 4071, "transformFlags": 0, }, "tagName": Object { - "end": 4254, + "end": 4070, "escapedText": "param", "flags": 4227072, "kind": 78, "modifierFlagsCache": 0, - "pos": 4249, + "pos": 4065, "transformFlags": 0, }, "type": "string", @@ -500,22 +500,22 @@ A private method. "deprecated": false, "deprecationMessage": "", "name": Object { - "end": 4113, + "end": 3938, "escapedText": "id", "flags": 4227072, "kind": 78, "modifierFlagsCache": 0, - "pos": 4111, + "pos": 3936, "transformFlags": 0, }, "optional": true, "tagName": Object { - "end": 4110, + "end": 3935, "escapedText": "param", "flags": 4227072, "kind": 78, "modifierFlagsCache": 0, - "pos": 4105, + "pos": 3930, "transformFlags": 0, }, "type": "number", @@ -945,7 +945,7 @@ export class InputComponent { "deprecated": false, "deprecationMessage": "", "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts", - "id": "interface-ISomeInterface-fd2eff3e4da750f1c06d4928670993b3", + "id": "interface-ISomeInterface-568feeafa68e593b062061c27c4625a9", "indexSignatures": Array [], "kind": 163, "methods": Array [], From d0152a1117bb57ae0537b6c8657d817654c18511 Mon Sep 17 00:00:00 2001 From: Yngve Bakken-Nilsen Date: Mon, 9 Aug 2021 13:28:52 +0200 Subject: [PATCH 5/6] fix tests and angular chromatic --- .../addons/docs/__snapshots__/duplicate.stories.storyshot | 5 +++-- .../doc-button/__snapshots__/doc-button.stories.storyshot | 5 +++-- .../src/stories/addons/docs/doc-button/doc-button.stories.ts | 2 +- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/examples/angular-cli/src/stories/addons/docs/__snapshots__/duplicate.stories.storyshot b/examples/angular-cli/src/stories/addons/docs/__snapshots__/duplicate.stories.storyshot index a763f20505b..c6acb312738 100644 --- a/examples/angular-cli/src/stories/addons/docs/__snapshots__/duplicate.stories.storyshot +++ b/examples/angular-cli/src/stories/addons/docs/__snapshots__/duplicate.stories.storyshot @@ -3,12 +3,13 @@ exports[`Storyshots Addons/Docs/DuplicateStories Basic 1`] = `