GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-06 03:01:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #15743 from yngvebn/render_custom_angular_template_source

Browse Source 
Addon-docs/Angular: Render user defined template as source if it exists
This commit is contained in:
Michael Shilman 2021-08-10 21:58:16 +08:00 committed by GitHub
commit 4f6d93bff7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 69 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
addons/docs/src/frameworks/angular/sourceDecorator.ts
View File

@ -36,13 +36,13 @@ export const sourceDecorator = (storyFn: StoryFn<IStory>, context: StoryContext)
return story;
}
const channel = addons.getChannel();
const { props, template } = story;
const { props, template, userDefinedTemplate } = story;
const {
parameters: { component, argTypes },
} = context;
if (component) {
if (component && !userDefinedTemplate) {
const source = computesTemplateSourceFromComponent(component, props, argTypes);
// We might have a story with a Directive or Service defined as the component

8
app/angular/src/client/preview/decorateStory.test.ts
View File

@ -37,6 +37,7 @@ describe('decorateStory', () => {
},
template:
'<great-grandparent><grandparent [grandparentInput]="grandparentInput"><parent [parentInput]="parentInput" (parentOutput)="parentOutput($event)"></child></parent></grandparent></great-grandparent>',
userDefinedTemplate: true,
});
});
@ -75,6 +76,7 @@ describe('decorateStory', () => {
},
template:
'<great-grandparent><grandparent [grandparentInput]="grandparentInput"><parent [parentInput]="parentInput" (parentOutput)="parentOutput($event)"></child></parent></grandparent></great-grandparent>',
userDefinedTemplate: true,
});
});
@ -89,6 +91,7 @@ describe('decorateStory', () => {
expect(decorated(makeContext({ parameters: { component: FooComponent } }))).toEqual({
template:
'<great-grandparent><grandparent><parent></child></parent></grandparent></great-grandparent>',
userDefinedTemplate: true,
});
});
@ -121,6 +124,7 @@ describe('decorateStory', () => {
expect(decorated(makeContext({ parameters: { component: FooComponent } }))).toEqual({
template:
'<great-grandparent><grandparent><parent></child></parent></grandparent></great-grandparent>',
userDefinedTemplate: true,
});
});
@ -153,6 +157,7 @@ describe('decorateStory', () => {
expect(decorated()).toEqual({
template:
'<great-grandparent><grandparent><parent></child></parent></grandparent></great-grandparent>',
userDefinedTemplate: true,
});
});
@ -185,6 +190,7 @@ describe('decorateStory', () => {
expect(decorated(makeContext({ parameters: { component: FooComponent } }))).toEqual({
template:
'<great-grandparent><grandparent><parent><foo></foo></parent></grandparent></great-grandparent>',
userDefinedTemplate: false,
});
});
@ -218,6 +224,7 @@ describe('decorateStory', () => {
template:
'<great-grandparent><grandparent><parent><foo></foo></parent></grandparent></great-grandparent>',
component: FooComponent,
userDefinedTemplate: false,
});
});
@ -258,6 +265,7 @@ describe('decorateStory', () => {
)
).toEqual({
template: 'Args available in the story : withControl,withAction',
userDefinedTemplate: true,
});
});
});

6
app/angular/src/client/preview/decorateStory.ts
View File

@ -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,14 @@ const prepareMain = (
let { template } = story;
const component = story.component ?? context.parameters.component;
const userDefinedTemplate = !hasNoTemplate(template);
if (hasNoTemplate(template) && component) {
if (!userDefinedTemplate && component) {
template = computesTemplateFromComponent(component, story.props, '');
}
return {
...story,
...(template ? { template } : {}),
...(template ? { template, userDefinedTemplate } : {}),
};
};

1
app/angular/src/client/preview/types.ts
View File

@ -28,4 +28,5 @@ export interface StoryFnAngularReturnType {
moduleMetadata?: NgModuleMetadata;
template?: string;
styles?: string[];
userDefinedTemplate?: boolean;
}

46
examples/angular-cli/src/stories/__snapshots__/welcome-storybook.stories.storyshot
View File

@ -3,47 +3,47 @@
exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
<storybook-wrapper>
<storybook-welcome-component
_nghost-a-c152=""
_nghost-a-c153=""
>
<main
_ngcontent-a-c152=""
_ngcontent-a-c153=""
>
<h1
_ngcontent-a-c152=""
_ngcontent-a-c153=""
>
Welcome to storybook
</h1>
<p
_ngcontent-a-c152=""
_ngcontent-a-c153=""
>
This is a UI component dev environment for your app.
</p>
<p
_ngcontent-a-c152=""
_ngcontent-a-c153=""
>
We've added some basic stories inside the
<span
_ngcontent-a-c152=""
_ngcontent-a-c153=""
class="inline-code"
>
src/stories
</span>
directory.
<br
_ngcontent-a-c152=""
_ngcontent-a-c153=""
/>
A story is a single state of one or more UI components. You can have as many stories as you want.
<br
_ngcontent-a-c152=""
_ngcontent-a-c153=""
/>
(Basically a story is like a visual test case.)
</p>
<p
_ngcontent-a-c152=""
_ngcontent-a-c153=""
>
See these sample
<a
_ngcontent-a-c152=""
_ngcontent-a-c153=""
role="button"
tabindex="0"
>
@ -51,7 +51,7 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
</a>
for a component called
<span
_ngcontent-a-c152=""
_ngcontent-a-c153=""
class="inline-code"
>
Button
@ -59,26 +59,26 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
.
</p>
<p
_ngcontent-a-c152=""
_ngcontent-a-c153=""
>
Just like that, you can add your own components as stories.
<br
_ngcontent-a-c152=""
_ngcontent-a-c153=""
/>
You can also edit those components and see changes right away.
<br
_ngcontent-a-c152=""
_ngcontent-a-c153=""
/>
(Try editing the
<span
_ngcontent-a-c152=""
_ngcontent-a-c153=""
class="inline-code"
>
Button
</span>
stories located at
<span
_ngcontent-a-c152=""
_ngcontent-a-c153=""
class="inline-code"
>
src/stories/index.js
@ -86,15 +86,15 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
.)
</p>
<p
_ngcontent-a-c152=""
_ngcontent-a-c153=""
>
Usually we create stories with smaller UI components in the app.
<br
_ngcontent-a-c152=""
_ngcontent-a-c153=""
/>
Have a look at the
<a
_ngcontent-a-c152=""
_ngcontent-a-c153=""
href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer"
target="_blank"
@ -104,20 +104,20 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
section in our documentation.
</p>
<p
_ngcontent-a-c152=""
_ngcontent-a-c153=""
class="note"
>
<b
_ngcontent-a-c152=""
_ngcontent-a-c153=""
>
NOTE:
</b>
<br
_ngcontent-a-c152=""
_ngcontent-a-c153=""
/>
Have a look at the
<span
_ngcontent-a-c152=""
_ngcontent-a-c153=""
class="inline-code"
>
.storybook/webpack.config.js

21
examples/angular-cli/src/stories/addons/docs/doc-button/__snapshots__/doc-button.stories.storyshot
View File

@ -20,3 +20,24 @@ exports[`Storyshots Addons/Docs/DocButton Basic 1`] = `
</my-button>
</storybook-wrapper>
`;
exports[`Storyshots Addons/Docs/DocButton With Template 1`] = `
<storybook-wrapper>
<my-button
ng-reflect-appearance="primary"
ng-reflect-label="Template test"
>
<button
class="btn-primary btn-medium"
ng-reflect-ng-class="btn-primary,btn-medium"
>
<img
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
width="100"
/>
Template test
</button>
</my-button>
</storybook-wrapper>
`;

3
examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.component.scss
View File

@ -0,0 +1,3 @@
.btn-primary {
background-color: #ff9899;
}

6
examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.stories.ts
View File

@ -9,3 +9,9 @@ export const Basic = (args) => ({
props: args,
});
Basic.args = { label: 'Args test', isDisabled: false };
export const WithTemplate = (args) => ({
props: args,
template: '<my-button [label]="label" [appearance]="appearance"></my-button>',
});
WithTemplate.args = { label: 'Template test', appearance: 'primary' };

4
examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot
View File

@ -3,7 +3,7 @@
exports[`Storyshots Core / Story host styles With Args 1`] = `
<storybook-wrapper>
<storybook-button-component
_ngcontent-a-c145=""
_ngcontent-a-c146=""
_nghost-a-c43=""
ng-reflect-text="Button with custom styles"
>
@ -19,7 +19,7 @@ exports[`Storyshots Core / Story host styles With Args 1`] = `
exports[`Storyshots Core / Story host styles With story template 1`] = `
<storybook-wrapper>
<storybook-button-component
_ngcontent-a-c144=""
_ngcontent-a-c145=""
_nghost-a-c43=""
ng-reflect-text="Button with custom styles"
>