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

refactor(angular): rework Welcome examples

Browse Source
This commit is contained in:
ThibaudAv 2021-02-05 20:51:13 +01:00
parent 97f4104bf7
commit e34d7527d1
16 changed files with 157 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
examples/angular-cli/.storybook/preview.ts
View File

@ -22,6 +22,11 @@ addParameters({
inlineStories: true,
prepareForInline,
},
options: {
storySort: {
order: ['Welcome'],
},
},
});
export const globalTypes = {

61
examples/angular-cli/src/stories/__snapshots__/welcome-angular.stories.storyshot Normal file
View File

@ -0,0 +1,61 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Welcome/ To Angular To Angular 1`] = `
<storybook-wrapper>
<storybook-app-root>
<div
class="hide"
style="color: red; font-size: 30px; text-align: center;"
>
This should be hidden, if not - scss is not loaded as needed.
</div>
<div
style="text-align:center"
>
<h1>
Welcome to app!
</h1>
<img
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
width="300"
/>
</div>
<h2>
Here are some links to help you start:
</h2>
<ul>
<li>
<h2>
<a
href="https://angular.io/tutorial"
target="_blank"
>
Tour of Heroes
</a>
</h2>
</li>
<li>
<h2>
<a
href="https://github.com/angular/angular-cli/wiki"
target="_blank"
>
CLI Documentation
</a>
</h2>
</li>
<li>
<h2>
<a
href="https://blog.angular.io//"
target="_blank"
>
Angular blog
</a>
</h2>
</li>
</ul>
</storybook-app-root>
</storybook-wrapper>
`;

87
examples/angular-cli/src/stories/__snapshots__/index.stories.storyshot → examples/angular-cli/src/stories/__snapshots__/welcome-storybook.stories.storyshot
View File

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

8
examples/angular-cli/src/stories/addons/actions/__snapshots__/addon-actions.stories.storyshot
View File

@ -3,11 +3,11 @@
exports[`Storyshots Addons/Actions Action and method 1`] = `
<storybook-wrapper>
<storybook-button-component
_nghost-a-c7=""
_nghost-a-c4=""
ng-reflect-text="Action and Method"
>
<button
_ngcontent-a-c7=""
_ngcontent-a-c4=""
>
Action and Method
</button>
@ -18,11 +18,11 @@ exports[`Storyshots Addons/Actions Action and method 1`] = `
exports[`Storyshots Addons/Actions Action only 1`] = `
<storybook-wrapper>
<storybook-button-component
_nghost-a-c6=""
_nghost-a-c3=""
ng-reflect-text="Action only"
>
<button
_ngcontent-a-c6=""
_ngcontent-a-c3=""
>
Action only
</button>

8
examples/angular-cli/src/stories/addons/docs/__snapshots__/addon-docs.stories.storyshot
View File

@ -3,11 +3,11 @@
exports[`Storyshots Addons/Docs with some emoji 1`] = `
<storybook-wrapper>
<storybook-button-component
_nghost-a-c9=""
_nghost-a-c6=""
ng-reflect-text="😀 😎 👍 💯"
>
<button
_ngcontent-a-c9=""
_ngcontent-a-c6=""
>
😀 😎 👍 💯
</button>
@ -18,11 +18,11 @@ exports[`Storyshots Addons/Docs with some emoji 1`] = `
exports[`Storyshots Addons/Docs with text 1`] = `
<storybook-wrapper>
<storybook-button-component
_nghost-a-c8=""
_nghost-a-c5=""
ng-reflect-text="Hello Button"
>
<button
_ngcontent-a-c8=""
_ngcontent-a-c5=""
>
Hello Button
</button>

4
examples/angular-cli/src/stories/addons/docs/__snapshots__/simple.stories.storyshot
View File

@ -3,11 +3,11 @@
exports[`Storyshots Addons/Docs/SimpleButton with text 1`] = `
<storybook-wrapper>
<storybook-button-component
_nghost-a-c11=""
_nghost-a-c8=""
ng-reflect-text="Hello 👋"
>
<button
_ngcontent-a-c11=""
_ngcontent-a-c8=""
>
Hello 👋
</button>

4
examples/angular-cli/src/stories/addons/docs/iframe/__snapshots__/iframe.stories.storyshot
View File

@ -3,11 +3,11 @@
exports[`Storyshots Addons/Docs/Iframe Basic 1`] = `
<storybook-wrapper>
<storybook-button-component
_nghost-a-c10=""
_nghost-a-c7=""
ng-reflect-text="Add 👾"
>
<button
_ngcontent-a-c10=""
_ngcontent-a-c7=""
>
Add 👾
</button>

4
examples/angular-cli/src/stories/addons/links/__snapshots__/addon-links.stories.storyshot
View File

@ -3,11 +3,11 @@
exports[`Storyshots Addons/Links button with link to another story 1`] = `
<storybook-wrapper>
<storybook-button-component
_nghost-a-c12=""
_nghost-a-c9=""
ng-reflect-text="Go to Welcome Story"
>
<button
_ngcontent-a-c12=""
_ngcontent-a-c9=""
>
Go to Welcome Story
</button>

12
examples/angular-cli/src/stories/basics/styles/__snapshots__/story-styles.stories.storyshot
View File

@ -3,12 +3,12 @@
exports[`Storyshots Basics / Story host styles With Knobs 1`] = `
<storybook-wrapper>
<storybook-button-component
_ngcontent-a-c15=""
_nghost-a-c16=""
_ngcontent-a-c12=""
_nghost-a-c13=""
ng-reflect-text="Button with custom styles"
>
<button
_ngcontent-a-c16=""
_ngcontent-a-c13=""
>
Button with custom styles
</button>
@ -19,12 +19,12 @@ exports[`Storyshots Basics / Story host styles With Knobs 1`] = `
exports[`Storyshots Basics / Story host styles With story template 1`] = `
<storybook-wrapper>
<storybook-button-component
_ngcontent-a-c13=""
_nghost-a-c14=""
_ngcontent-a-c10=""
_nghost-a-c11=""
ng-reflect-text="Button with custom styles"
>
<button
_ngcontent-a-c14=""
_ngcontent-a-c11=""
>
Button with custom styles
</button>

11
examples/angular-cli/src/stories/core/parameters/__snapshots__/parameters.stories.storyshot
View File

@ -3,18 +3,25 @@
exports[`Storyshots Core/Parameters passed to story 1`] = `
<storybook-wrapper>
<storybook-button-component
_nghost-a-c17=""
_nghost-a-c14=""
ng-reflect-text="Parameters are {
\\"docs\\": {
"
>
<button
_ngcontent-a-c17=""
_ngcontent-a-c14=""
>
Parameters are {
"docs": {
"inlineStories": true
},
"options": {
"storySort": {
"order": [
"Welcome"
]
}
},
"globalTypes": {
"theme": {
"name": "Theme",

42
examples/angular-cli/src/stories/index.stories.ts
View File

@ -1,42 +0,0 @@
import { storiesOf, moduleMetadata } from '@storybook/angular';
import { Welcome, Button } from '@storybook/angular/demo';
import { linkTo } from '@storybook/addon-links';
import { environment } from '../environments/environment';
if (environment) {
// This ensures that the basePath typeScript feature works with storybook
}
storiesOf('Welcome', module).add('to Storybook', () => ({
template: `<storybook-welcome-component (showApp)="showApp()"></storybook-welcome-component>`,
props: {
showApp: linkTo('Button'),
},
moduleMetadata: {
declarations: [Welcome],
},
}));
storiesOf('Button', module)
.addDecorator(
moduleMetadata({
declarations: [Button],
})
)
.add('with text', () => ({
template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
props: {
text: 'Hello Button',
onClick: (event: any) => {
console.log('some bindings work');
console.log(event);
},
},
}))
.add('with some emoji', () => ({
template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component><storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
props: {
text: '😀 😎 👍 💯',
onClick: () => {},
},
}));

4
examples/angular-cli/src/stories/issues/__snapshots__/12009-unknown-component.stories.storyshot
View File

@ -3,11 +3,11 @@
exports[`Storyshots Addon/Issues/12009 unknown component Basic 1`] = `
<storybook-wrapper>
<storybook-button-component
_nghost-a-c18=""
_nghost-a-c15=""
ng-reflect-text="Unknown component"
>
<button
_ngcontent-a-c18=""
_ngcontent-a-c15=""
>
Unknown component
</button>

4
examples/angular-cli/src/stories/legacy/__snapshots__/component-in-story.stories.storyshot
View File

@ -3,11 +3,11 @@
exports[`Storyshots Legacy / Component in Story Basic 1`] = `
<storybook-wrapper>
<storybook-button-component
_nghost-a-c19=""
_nghost-a-c16=""
ng-reflect-text="Hello Button"
>
<button
_ngcontent-a-c19=""
_ngcontent-a-c16=""
>
Hello Button
</button>

12
examples/angular-cli/src/stories/legacy/__snapshots__/storiesOf.stories.storyshot
View File

@ -3,20 +3,20 @@
exports[`Storyshots Legacy / Story with storiesOf() with some emoji 1`] = `
<storybook-wrapper>
<storybook-button-component
_nghost-a-c5=""
_nghost-a-c2=""
ng-reflect-text="😀 😎 👍 💯"
>
<button
_ngcontent-a-c5=""
_ngcontent-a-c2=""
>
😀 😎 👍 💯
</button>
</storybook-button-component><storybook-button-component
_nghost-a-c5=""
_nghost-a-c2=""
ng-reflect-text="😀 😎 👍 💯"
>
<button
_ngcontent-a-c5=""
_ngcontent-a-c2=""
>
😀 😎 👍 💯
</button>
@ -27,11 +27,11 @@ exports[`Storyshots Legacy / Story with storiesOf() with some emoji 1`] = `
exports[`Storyshots Legacy / Story with storiesOf() with text 1`] = `
<storybook-wrapper>
<storybook-button-component
_nghost-a-c4=""
_nghost-a-c1=""
ng-reflect-text="Hello Button"
>
<button
_ngcontent-a-c4=""
_ngcontent-a-c1=""
>
Hello Button
</button>

14
examples/angular-cli/src/stories/welcome-angular.stories.ts Normal file
View File

@ -0,0 +1,14 @@
import { Story, Meta } from '@storybook/angular';
import { linkTo } from '@storybook/addon-links';
import { AppComponent } from '../app/app.component';
export default {
title: 'Welcome/ To Angular',
} as Meta;
export const toAngular: Story = () => ({
component: AppComponent,
props: {
showApp: linkTo('Button'),
},
});

14
examples/angular-cli/src/stories/welcome-storybook.stories.ts Normal file
View File

@ -0,0 +1,14 @@
import { Story, Meta } from '@storybook/angular';
import { Welcome } from '@storybook/angular/demo';
import { linkTo } from '@storybook/addon-links';
export default {
title: 'Welcome/ To Storybook',
} as Meta;
export const toStorybook: Story = () => ({
component: Welcome,
props: {
showApp: linkTo('Button'),
},
});