mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 20:41:07 +08:00
Merge pull request #19202 from storybookjs/tom/sb-606-migrate-stories-and-delete-angular-cli
Remove `angular-cli` example
This commit is contained in:
Tom Coleman
GitHub
commit
4ebdcdaa74
@ -1,15 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / Angular forms / ControlValueAccessor Simple input 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-custom-cva-component>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<input
|
||||
class="ng-untouched ng-pristine ng-valid"
|
||||
type="text"
|
||||
/>
|
||||
</storybook-custom-cva-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,57 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / Component / With Complex Selectors attribute selectors 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-attribute-selector
|
||||
foo="bar"
|
||||
>
|
||||
<h3>
|
||||
Attribute selector
|
||||
</h3>
|
||||
Selector: storybook-attribute-selector[foo="bar"]
|
||||
<br />
|
||||
Generated template: <storybook-attribute-selector foo="bar"></storybook-attribute-selector>
|
||||
</storybook-attribute-selector>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / With Complex Selectors class selectors 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-class-selector
|
||||
class="foo"
|
||||
>
|
||||
<h3>
|
||||
Class selector
|
||||
</h3>
|
||||
Selector: storybook-class-selector.foo,storybook-class-selector.bar
|
||||
<br />
|
||||
Generated template: <storybook-class-selector class="foo"></storybook-class-selector>
|
||||
</storybook-class-selector>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / With Complex Selectors multiple class selectors 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-button>
|
||||
<h3>
|
||||
Multiple selector
|
||||
</h3>
|
||||
Selector: storybook-button,button[foo],[foo].button,button[baz]
|
||||
<br />
|
||||
Generated template: <storybook-button></storybook-button>
|
||||
</storybook-button>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / With Complex Selectors multiple selectors 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-multiple-selector>
|
||||
<h3>
|
||||
Multiple selector
|
||||
</h3>
|
||||
Selector: storybook-button,button[foo],[foo].button,button[baz]
|
||||
<br />
|
||||
Generated template: <storybook-multiple-selector></storybook-multiple-selector>
|
||||
</storybook-multiple-selector>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,35 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / Component / With Enum Types Basic 1`] = `
|
||||
<storybook-wrapper>
|
||||
<app-enums
|
||||
ng-reflect-aliased-union-type="Type Alias 1"
|
||||
ng-reflect-enum-alias="0"
|
||||
ng-reflect-enum-numeric="0"
|
||||
ng-reflect-enum-numeric-initial="1"
|
||||
ng-reflect-enum-strings="PRIMARY"
|
||||
ng-reflect-union-type="union a"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
unionType: union a
|
||||
</div>
|
||||
<div>
|
||||
aliasedUnionType: Type Alias 1
|
||||
</div>
|
||||
<div>
|
||||
enumNumeric: 0
|
||||
</div>
|
||||
<div>
|
||||
enumNumericInitial: 1
|
||||
</div>
|
||||
<div>
|
||||
enumStrings: PRIMARY
|
||||
</div>
|
||||
<div>
|
||||
enumAlias: 0
|
||||
</div>
|
||||
</div>
|
||||
</app-enums>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,26 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / Component / With Inheritance base button 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-base-button
|
||||
ng-reflect-label="this is label"
|
||||
>
|
||||
<button>
|
||||
this is label
|
||||
</button>
|
||||
</storybook-base-button>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / With Inheritance icon button 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-icon-button
|
||||
ng-reflect-icon="this is icon"
|
||||
ng-reflect-label="this is label"
|
||||
>
|
||||
<button>
|
||||
this is label - this is icon
|
||||
</button>
|
||||
</storybook-icon-button>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,74 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / Component / With ng-content / Button with different contents Always Define Template Or Component 1`] = `
|
||||
<storybook-wrapper>
|
||||
<sb-button>
|
||||
<button>
|
||||
<sb-button>
|
||||
<button
|
||||
style="background-color: rgb(94, 173, 245);"
|
||||
/>
|
||||
</sb-button>
|
||||
|
||||
</button>
|
||||
</sb-button>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / With ng-content / Button with different contents Empty Button 1`] = `
|
||||
<storybook-wrapper>
|
||||
<sb-button>
|
||||
<button />
|
||||
</sb-button>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / With ng-content / Button with different contents In <h1> 1`] = `
|
||||
<storybook-wrapper>
|
||||
<sb-button>
|
||||
<button>
|
||||
<h1>
|
||||
My button in h1
|
||||
</h1>
|
||||
</button>
|
||||
</sb-button>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / With ng-content / Button with different contents With Component 1`] = `
|
||||
<storybook-wrapper>
|
||||
<sb-button>
|
||||
<button>
|
||||
<sb-emoji>
|
||||
👾
|
||||
</sb-emoji>
|
||||
|
||||
</button>
|
||||
</sb-button>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / With ng-content / Button with different contents With Component And Args 1`] = `
|
||||
<storybook-wrapper>
|
||||
<sb-button>
|
||||
<button>
|
||||
<sb-emoji
|
||||
ng-reflect-emoji="🌵"
|
||||
>
|
||||
🌵
|
||||
</sb-emoji>
|
||||
|
||||
</button>
|
||||
</sb-button>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / With ng-content / Button with different contents With Dynamic Content And Args 1`] = `
|
||||
<storybook-wrapper>
|
||||
<sb-button>
|
||||
<button>
|
||||
My button text
|
||||
</button>
|
||||
</sb-button>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,42 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / Component / With ng-content / Simple Default 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-with-ng-content>
|
||||
Content value:
|
||||
<div
|
||||
style="color: #1e88e5;"
|
||||
>
|
||||
<h1>
|
||||
This is rendered in ng-content
|
||||
</h1>
|
||||
</div>
|
||||
</storybook-with-ng-content>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / With ng-content / Simple Only Component 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-with-ng-content>
|
||||
Content value:
|
||||
<div
|
||||
style="color: #1e88e5;"
|
||||
/>
|
||||
</storybook-with-ng-content>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / With ng-content / Simple With Dynamic Content And Args 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-with-ng-content>
|
||||
Content value:
|
||||
<div
|
||||
style="color: #1e88e5;"
|
||||
>
|
||||
<h1>
|
||||
Default content
|
||||
</h1>
|
||||
</div>
|
||||
</storybook-with-ng-content>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,13 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / Component / With OnPush strategy Class-specified component with OnPush and Args 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-on-push-box
|
||||
ng-reflect-bg-color="#FFF000"
|
||||
ng-reflect-word="The text"
|
||||
style="background-color: rgb(255, 240, 0);"
|
||||
>
|
||||
Word of the day: The text
|
||||
</storybook-on-push-box>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,25 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / Component / With Pipes Simple 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-with-pipe
|
||||
ng-reflect-field="foobar"
|
||||
>
|
||||
<h1>
|
||||
CustomPipe: foobar
|
||||
</h1>
|
||||
</storybook-with-pipe>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / With Pipes With args 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-with-pipe
|
||||
ng-reflect-field="Foo Bar"
|
||||
>
|
||||
<h1>
|
||||
CustomPipe: Foo Bar
|
||||
</h1>
|
||||
</storybook-with-pipe>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,59 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / Component / With Provider inputs and inject dependencies 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-di-component
|
||||
ng-reflect-title="Component dependencies"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
All dependencies are defined: true
|
||||
</div>
|
||||
<div>
|
||||
Title: Component dependencies
|
||||
</div>
|
||||
<div>
|
||||
Injector: function NodeInjector(_tNode, _lView) {
|
||||
this._tNode = _tNode;
|
||||
this._lView = _lView;
|
||||
}
|
||||
</div>
|
||||
<div>
|
||||
ElementRef: {"nativeElement":{"__ngContext__":"[Array(33)]","_constructor-name_":"HTMLElement"}}
|
||||
</div>
|
||||
<div>
|
||||
TestToken: 123
|
||||
</div>
|
||||
</div>
|
||||
</storybook-di-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / With Provider inputs and inject dependencies with args 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-di-component
|
||||
ng-reflect-title="Component dependencies"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
All dependencies are defined: true
|
||||
</div>
|
||||
<div>
|
||||
Title: Component dependencies
|
||||
</div>
|
||||
<div>
|
||||
Injector: function NodeInjector(_tNode, _lView) {
|
||||
this._tNode = _tNode;
|
||||
this._lView = _lView;
|
||||
}
|
||||
</div>
|
||||
<div>
|
||||
ElementRef: {"nativeElement":{"__ngContext__":"[Array(33)]","_constructor-name_":"HTMLElement"}}
|
||||
</div>
|
||||
<div>
|
||||
TestToken: 123
|
||||
</div>
|
||||
</div>
|
||||
</storybook-di-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,25 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / Component / With StyleUrls Component with styles 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-styled-component>
|
||||
<div>
|
||||
<p
|
||||
class="red-color"
|
||||
>
|
||||
Styled with scoped CSS
|
||||
</p>
|
||||
<p
|
||||
class="blue-color"
|
||||
>
|
||||
Styled with scoped SCSS
|
||||
</p>
|
||||
<p
|
||||
class="green-color"
|
||||
>
|
||||
Styled with global CSS
|
||||
</p>
|
||||
</div>
|
||||
</storybook-styled-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,23 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / Component / without selector / Custom wrapper *NgComponentOutlet Custom wrapper *NgComponentOutlet 1`] = `
|
||||
<storybook-wrapper>
|
||||
<ng-component-outlet-wrapper
|
||||
ng-reflect-color="green"
|
||||
ng-reflect-component-outlet="function WithoutSelectorCompon"
|
||||
ng-reflect-name="Dixie Normous"
|
||||
>
|
||||
<ng-component>
|
||||
My name in color :
|
||||
<div
|
||||
style="color: green;"
|
||||
>
|
||||
Dixie Normous
|
||||
</div>
|
||||
Ng-content : Inspired by
|
||||
https://angular.io/api/common/NgComponentOutlet
|
||||
</ng-component>
|
||||
|
||||
</ng-component-outlet-wrapper>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,17 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / Component / without selector / Custom wrapper ComponentFactoryResolver Custom wrapper ComponentFactoryResolver 1`] = `
|
||||
<storybook-wrapper>
|
||||
<component-factory-wrapper
|
||||
ng-reflect-args="[object Object]"
|
||||
ng-reflect-component-outlet="function WithoutSelectorCompon"
|
||||
/><ng-component>
|
||||
My name in color :
|
||||
<div
|
||||
style="color: chartreuse;"
|
||||
>
|
||||
Dixie Normous
|
||||
</div>
|
||||
</ng-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,27 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / Component / without selector Simple Component 1`] = `
|
||||
<storybook-wrapper>
|
||||
<ng-component>
|
||||
My name in color :
|
||||
<div
|
||||
style="color: rgb(30, 136, 229);"
|
||||
>
|
||||
Joe Bar
|
||||
</div>
|
||||
</ng-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / without selector With Injection Token And Args 1`] = `
|
||||
<storybook-wrapper>
|
||||
<ng-component>
|
||||
My name in color :
|
||||
<div
|
||||
style="color: red;"
|
||||
>
|
||||
Dixie Normous
|
||||
</div>
|
||||
</ng-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,113 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / NgModule / forRoot() pattern Chips group 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-chips-group
|
||||
ng-reflect-chips="[object Object],[object Object"
|
||||
>
|
||||
<storybook-chip
|
||||
class="chip"
|
||||
ng-reflect-display-text="Chip 1"
|
||||
style="background-color: rgb(255, 84, 84);"
|
||||
>
|
||||
<span
|
||||
class="text"
|
||||
>
|
||||
Chíp 1
|
||||
</span>
|
||||
<div
|
||||
class="remove"
|
||||
>
|
||||
<span
|
||||
class="x"
|
||||
>
|
||||
✕
|
||||
</span>
|
||||
</div>
|
||||
</storybook-chip>
|
||||
<storybook-chip
|
||||
class="chip"
|
||||
ng-reflect-display-text="Chip 2"
|
||||
style="background-color: rgb(255, 84, 84);"
|
||||
>
|
||||
<span
|
||||
class="text"
|
||||
>
|
||||
Chíp 2
|
||||
</span>
|
||||
<div
|
||||
class="remove"
|
||||
>
|
||||
<span
|
||||
class="x"
|
||||
>
|
||||
✕
|
||||
</span>
|
||||
</div>
|
||||
</storybook-chip>
|
||||
|
||||
<div
|
||||
class="remove-all"
|
||||
>
|
||||
Remove All
|
||||
</div>
|
||||
|
||||
</storybook-chips-group>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / NgModule / forRoot() pattern Chips group with overridden provider 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-chips-group
|
||||
ng-reflect-chips="[object Object],[object Object"
|
||||
>
|
||||
<storybook-chip
|
||||
class="chip"
|
||||
ng-reflect-display-text="Chip 1"
|
||||
style="background-color: yellow;"
|
||||
>
|
||||
<span
|
||||
class="text"
|
||||
>
|
||||
Chíp 1
|
||||
</span>
|
||||
<div
|
||||
class="remove"
|
||||
>
|
||||
<span
|
||||
class="x"
|
||||
>
|
||||
✕
|
||||
</span>
|
||||
</div>
|
||||
</storybook-chip>
|
||||
<storybook-chip
|
||||
class="chip"
|
||||
ng-reflect-display-text="Chip 2"
|
||||
style="background-color: yellow;"
|
||||
>
|
||||
<span
|
||||
class="text"
|
||||
>
|
||||
Chíp 2
|
||||
</span>
|
||||
<div
|
||||
class="remove"
|
||||
>
|
||||
<span
|
||||
class="x"
|
||||
>
|
||||
✕
|
||||
</span>
|
||||
</div>
|
||||
</storybook-chip>
|
||||
|
||||
<div
|
||||
class="remove-all"
|
||||
>
|
||||
Remove All
|
||||
</div>
|
||||
|
||||
</storybook-chips-group>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,81 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / NgModule / Module with multiple component Chip 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-chip
|
||||
ng-reflect-display-text="Chip"
|
||||
style="background-color: rgb(238, 238, 238);"
|
||||
>
|
||||
<span
|
||||
class="text"
|
||||
>
|
||||
Chíp
|
||||
</span>
|
||||
<div
|
||||
class="remove"
|
||||
>
|
||||
<span
|
||||
class="x"
|
||||
>
|
||||
✕
|
||||
</span>
|
||||
</div>
|
||||
</storybook-chip>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / NgModule / Module with multiple component Chips Group 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-chips-group
|
||||
ng-reflect-chips="[object Object],[object Object"
|
||||
>
|
||||
<storybook-chip
|
||||
class="chip"
|
||||
ng-reflect-display-text="Chip 1"
|
||||
style="background-color: rgb(238, 238, 238);"
|
||||
>
|
||||
<span
|
||||
class="text"
|
||||
>
|
||||
Chíp 1
|
||||
</span>
|
||||
<div
|
||||
class="remove"
|
||||
>
|
||||
<span
|
||||
class="x"
|
||||
>
|
||||
✕
|
||||
</span>
|
||||
</div>
|
||||
</storybook-chip>
|
||||
<storybook-chip
|
||||
class="chip"
|
||||
ng-reflect-display-text="Chip 2"
|
||||
style="background-color: rgb(238, 238, 238);"
|
||||
>
|
||||
<span
|
||||
class="text"
|
||||
>
|
||||
Chíp 2
|
||||
</span>
|
||||
<div
|
||||
class="remove"
|
||||
>
|
||||
<span
|
||||
class="x"
|
||||
>
|
||||
✕
|
||||
</span>
|
||||
</div>
|
||||
</storybook-chip>
|
||||
|
||||
<div
|
||||
class="remove-all"
|
||||
>
|
||||
Remove All
|
||||
</div>
|
||||
|
||||
</storybook-chips-group>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,213 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Core / Decorators / ComponentWrapperDecorator Angular Legacy Rendering 1`] = `
|
||||
<storybook-wrapper>
|
||||
Grandparent<br /><div
|
||||
style="margin: 3em; border: solid;"
|
||||
>
|
||||
Custom Decorator
|
||||
<div
|
||||
style="margin: 3em;"
|
||||
>
|
||||
Child Template
|
||||
</div>
|
||||
</div>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component 1`] = `
|
||||
<storybook-wrapper>
|
||||
Grandparent<br /><div
|
||||
style="margin: 3em; border: solid;"
|
||||
>
|
||||
<child-component
|
||||
ng-reflect-child-text="Child text"
|
||||
>
|
||||
Child
|
||||
<br />
|
||||
Input text: Child text
|
||||
<br />
|
||||
Output :
|
||||
<button>
|
||||
Click here !
|
||||
</button>
|
||||
<br />
|
||||
Private text: Child private text
|
||||
<br />
|
||||
</child-component>
|
||||
|
||||
</div>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component Wrapper Decorator 1`] = `
|
||||
<storybook-wrapper>
|
||||
Grandparent<br /><div
|
||||
style="margin: 3em; border: solid;"
|
||||
>
|
||||
<parent-component>
|
||||
Parent
|
||||
<br />
|
||||
Input text:
|
||||
<br />
|
||||
Output :
|
||||
<button>
|
||||
Click here !
|
||||
</button>
|
||||
<br />
|
||||
<div
|
||||
style="margin: 3em; border: solid;"
|
||||
>
|
||||
<child-component
|
||||
ng-reflect-child-text="Child text"
|
||||
>
|
||||
Child
|
||||
<br />
|
||||
Input text: Child text
|
||||
<br />
|
||||
Output :
|
||||
<button>
|
||||
Click here !
|
||||
</button>
|
||||
<br />
|
||||
Private text: Child private text
|
||||
<br />
|
||||
</child-component>
|
||||
|
||||
</div>
|
||||
</parent-component>
|
||||
</div>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component Wrapper Decorator And Args 1`] = `
|
||||
<storybook-wrapper>
|
||||
Grandparent<br /><div
|
||||
style="margin: 3em; border: solid;"
|
||||
>
|
||||
<parent-component>
|
||||
Parent
|
||||
<br />
|
||||
Input text:
|
||||
<br />
|
||||
Output :
|
||||
<button>
|
||||
Click here !
|
||||
</button>
|
||||
<br />
|
||||
<div
|
||||
style="margin: 3em; border: solid;"
|
||||
>
|
||||
<child-component
|
||||
ng-reflect-child-text="Child text"
|
||||
>
|
||||
Child
|
||||
<br />
|
||||
Input text: Child text
|
||||
<br />
|
||||
Output :
|
||||
<button>
|
||||
Click here !
|
||||
</button>
|
||||
<br />
|
||||
Private text: Child private text
|
||||
<br />
|
||||
</child-component>
|
||||
|
||||
</div>
|
||||
</parent-component>
|
||||
</div>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component Wrapper Decorator And Props 1`] = `
|
||||
<storybook-wrapper>
|
||||
Grandparent<br /><div
|
||||
style="margin: 3em; border: solid;"
|
||||
>
|
||||
<parent-component
|
||||
ng-reflect-parent-text="Parent text"
|
||||
>
|
||||
Parent
|
||||
<br />
|
||||
Input text: Parent text
|
||||
<br />
|
||||
Output :
|
||||
<button>
|
||||
Click here !
|
||||
</button>
|
||||
<br />
|
||||
<div
|
||||
style="margin: 3em; border: solid;"
|
||||
>
|
||||
<child-component
|
||||
ng-reflect-child-text="Child text"
|
||||
>
|
||||
Child
|
||||
<br />
|
||||
Input text: Child text
|
||||
<br />
|
||||
Output :
|
||||
<button>
|
||||
Click here !
|
||||
</button>
|
||||
<br />
|
||||
Private text: Child private text
|
||||
<br />
|
||||
</child-component>
|
||||
|
||||
</div>
|
||||
</parent-component>
|
||||
</div>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Custom Decorator 1`] = `
|
||||
<storybook-wrapper>
|
||||
Grandparent<br /><div
|
||||
style="margin: 3em; border: solid;"
|
||||
>
|
||||
Custom Decorator
|
||||
<div
|
||||
style="margin: 3em;"
|
||||
>
|
||||
Child Template
|
||||
</div>
|
||||
</div>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Legacy Component 1`] = `
|
||||
<storybook-wrapper>
|
||||
Grandparent<br /><div
|
||||
style="margin: 3em; border: solid;"
|
||||
>
|
||||
<child-component
|
||||
ng-reflect-child-text="Child text"
|
||||
>
|
||||
Child
|
||||
<br />
|
||||
Input text: Child text
|
||||
<br />
|
||||
Output :
|
||||
<button>
|
||||
Click here !
|
||||
</button>
|
||||
<br />
|
||||
Private text: Child private text
|
||||
<br />
|
||||
</child-component>
|
||||
|
||||
</div>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Template 1`] = `
|
||||
<storybook-wrapper>
|
||||
Grandparent<br /><div
|
||||
style="margin: 3em; border: solid;"
|
||||
>
|
||||
Child Template
|
||||
</div>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,117 +0,0 @@
|
||||
// your-component.stories.ts
|
||||
|
||||
import { componentWrapperDecorator, Meta, moduleMetadata } from '@storybook/angular';
|
||||
import ChildComponent from './child.component';
|
||||
import ParentComponent from './parent.component';
|
||||
|
||||
export default {
|
||||
title: 'Core / Decorators / ComponentWrapperDecorator',
|
||||
component: ChildComponent,
|
||||
decorators: [
|
||||
componentWrapperDecorator(
|
||||
(story) => `Grandparent<br><div style="margin: 3em; border:solid;">${story}</div>`
|
||||
),
|
||||
],
|
||||
args: { childText: 'Child text', childPrivateText: 'Child private text' },
|
||||
argTypes: { onClickChild: { action: 'onClickChild' } },
|
||||
} as Meta;
|
||||
|
||||
export const WithTemplate = (args) => ({
|
||||
template: `Child Template`,
|
||||
props: {
|
||||
...args,
|
||||
},
|
||||
});
|
||||
|
||||
export const WithComponent = (args) => ({
|
||||
props: {
|
||||
...args,
|
||||
},
|
||||
});
|
||||
|
||||
export const WithLegacyComponent = (args) => ({
|
||||
component: ChildComponent,
|
||||
props: {
|
||||
...args,
|
||||
},
|
||||
});
|
||||
|
||||
export const WithComponentWrapperDecorator = (args) => ({
|
||||
component: ChildComponent,
|
||||
props: {
|
||||
...args,
|
||||
},
|
||||
});
|
||||
WithComponentWrapperDecorator.decorators = [
|
||||
moduleMetadata({ declarations: [ParentComponent] }),
|
||||
componentWrapperDecorator(ParentComponent),
|
||||
];
|
||||
|
||||
export const WithComponentWrapperDecoratorAndProps = (args) => ({
|
||||
component: ChildComponent,
|
||||
props: {
|
||||
...args,
|
||||
},
|
||||
});
|
||||
WithComponentWrapperDecoratorAndProps.decorators = [
|
||||
moduleMetadata({ declarations: [ParentComponent] }),
|
||||
componentWrapperDecorator(ParentComponent, {
|
||||
parentText: 'Parent text',
|
||||
onClickParent: () => {
|
||||
console.log('onClickParent');
|
||||
},
|
||||
}),
|
||||
];
|
||||
|
||||
export const WithComponentWrapperDecoratorAndArgs = (args) => ({
|
||||
component: ChildComponent,
|
||||
props: {
|
||||
...args,
|
||||
},
|
||||
});
|
||||
WithComponentWrapperDecoratorAndArgs.argTypes = {
|
||||
parentText: { control: { type: 'text' } },
|
||||
onClickParent: { action: 'onClickParent' },
|
||||
};
|
||||
WithComponentWrapperDecoratorAndArgs.decorators = [
|
||||
moduleMetadata({ declarations: [ParentComponent] }),
|
||||
componentWrapperDecorator(ParentComponent, ({ args }) => ({
|
||||
parentText: args.parentText,
|
||||
onClickParent: args.onClickParent,
|
||||
})),
|
||||
];
|
||||
|
||||
export const WithCustomDecorator = (args) => ({
|
||||
template: `Child Template`,
|
||||
props: {
|
||||
...args,
|
||||
},
|
||||
});
|
||||
WithCustomDecorator.decorators = [
|
||||
(storyFunc) => {
|
||||
const story = storyFunc();
|
||||
|
||||
return {
|
||||
...story,
|
||||
template: `Custom Decorator <div style="margin: 3em">${story.template}</div>`,
|
||||
};
|
||||
},
|
||||
];
|
||||
|
||||
export const AngularLegacyRendering = (args) => ({
|
||||
template: `Child Template`,
|
||||
props: {
|
||||
...args,
|
||||
},
|
||||
});
|
||||
AngularLegacyRendering.parameters = { angularLegacyRendering: true };
|
||||
AngularLegacyRendering.decorators = [
|
||||
(storyFunc) => {
|
||||
const story = storyFunc();
|
||||
|
||||
return {
|
||||
...story,
|
||||
template: `Custom Decorator <div style="margin: 3em">${story.template}</div>`,
|
||||
};
|
||||
},
|
||||
];
|
||||
@ -1,11 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Core / Decorators / Theme Decorators Base 1`] = `
|
||||
<storybook-wrapper>
|
||||
<div
|
||||
class="light-theme"
|
||||
>
|
||||
Change theme with the brush in toolbar
|
||||
</div>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,18 +0,0 @@
|
||||
import { componentWrapperDecorator, Meta } from '@storybook/angular';
|
||||
|
||||
export default {
|
||||
title: 'Core / Decorators / Theme Decorators',
|
||||
decorators: [
|
||||
componentWrapperDecorator(
|
||||
(story) => `<div [class]="myTheme">${story}</div>`,
|
||||
({ globals }) => ({ myTheme: `${globals.theme}-theme` })
|
||||
),
|
||||
],
|
||||
} as Meta;
|
||||
|
||||
export const Base = (args) => ({
|
||||
template: 'Change theme with the brush in toolbar',
|
||||
props: {
|
||||
...args,
|
||||
},
|
||||
});
|
||||
@ -1,47 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Core / ModuleMetadata / In export default with decorator Story 1 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-simple-token-component
|
||||
ng-reflect-name="Prop Name"
|
||||
>
|
||||
<h3>
|
||||
Prop Name
|
||||
</h3>
|
||||
<p>
|
||||
Items:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Joe
|
||||
</li>
|
||||
<li>
|
||||
Jane
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</storybook-simple-token-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / ModuleMetadata / In export default with decorator Story 2 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-simple-token-component>
|
||||
<h3>
|
||||
Provider Name
|
||||
</h3>
|
||||
<p>
|
||||
Items:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Joe
|
||||
</li>
|
||||
<li>
|
||||
Jane
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</storybook-simple-token-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,47 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Core / ModuleMetadata / In stories Individual 1 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-simple-token-component
|
||||
ng-reflect-name="Prop Name"
|
||||
>
|
||||
<h3>
|
||||
Prop Name
|
||||
</h3>
|
||||
<p>
|
||||
Items:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Joe
|
||||
</li>
|
||||
<li>
|
||||
Jane
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</storybook-simple-token-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / ModuleMetadata / In stories Individual 2 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-simple-token-component>
|
||||
<h3>
|
||||
Provider Name
|
||||
</h3>
|
||||
<p>
|
||||
Items:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Jim
|
||||
</li>
|
||||
<li>
|
||||
Jill
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</storybook-simple-token-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,25 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Core / ModuleMetadata / Merge default and story Merge with default ModuleMetadata 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-simple-token-component
|
||||
ng-reflect-name="CustomPipe: Prop Name"
|
||||
>
|
||||
<h3>
|
||||
CustomPipe: Prop Name
|
||||
</h3>
|
||||
<p>
|
||||
Items:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Joe
|
||||
</li>
|
||||
<li>
|
||||
Jane
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</storybook-simple-token-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,34 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Core / Parameters / All parameters All parameters passed to story 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-button-component
|
||||
ng-reflect-text="Parameters are {
|
||||
\\"docs\\": {
|
||||
"
|
||||
>
|
||||
<button>
|
||||
Parameters are {
|
||||
"docs": {
|
||||
"inlineStories": true
|
||||
},
|
||||
"options": {
|
||||
"storySort": {
|
||||
"order": [
|
||||
"Welcome",
|
||||
"Core ",
|
||||
"Addons ",
|
||||
"Basics "
|
||||
]
|
||||
}
|
||||
},
|
||||
"framework": "angular",
|
||||
"globalParameter": "globalParameter",
|
||||
"chapterParameter": "chapterParameter",
|
||||
"storyParameter": "storyParameter",
|
||||
"__isArgsStory": true
|
||||
}
|
||||
</button>
|
||||
</storybook-button-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,13 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Core / Parameters / With Bootstrap Options With Preserve Whitespaces 1`] = `
|
||||
<storybook-wrapper>
|
||||
<component-with-whitespace>
|
||||
<div>
|
||||
<p>
|
||||
Some content
|
||||
</p>
|
||||
</div>
|
||||
</component-with-whitespace>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,67 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Core / Parameters / Layout Centered 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-button-component
|
||||
ng-reflect-text="Button"
|
||||
>
|
||||
<button>
|
||||
Button
|
||||
</button>
|
||||
</storybook-button-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / Parameters / Layout Default 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-button-component
|
||||
ng-reflect-text="Button"
|
||||
>
|
||||
<button>
|
||||
Button
|
||||
</button>
|
||||
</storybook-button-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / Parameters / Layout Fullscreen 1`] = `
|
||||
<storybook-wrapper>
|
||||
<div
|
||||
style="background-color: yellow;"
|
||||
>
|
||||
<storybook-button-component
|
||||
ng-reflect-text="Button"
|
||||
text="Button"
|
||||
>
|
||||
<button>
|
||||
Button
|
||||
</button>
|
||||
</storybook-button-component>
|
||||
|
||||
</div>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / Parameters / Layout None 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-button-component
|
||||
ng-reflect-text="Button"
|
||||
>
|
||||
<button>
|
||||
Button
|
||||
</button>
|
||||
</storybook-button-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / Parameters / Layout Padded 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-button-component
|
||||
ng-reflect-text="Button"
|
||||
>
|
||||
<button>
|
||||
Button
|
||||
</button>
|
||||
</storybook-button-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,31 +0,0 @@
|
||||
import type { Meta, StoryFn } from '@storybook/angular';
|
||||
import { Button } from '../../angular-demo';
|
||||
|
||||
export default {
|
||||
title: 'Core / Parameters / Layout',
|
||||
component: Button,
|
||||
} as Meta;
|
||||
|
||||
export const Default: StoryFn = () => ({
|
||||
props: { text: 'Button' },
|
||||
});
|
||||
|
||||
export const Fullscreen: StoryFn = () => ({
|
||||
template: `<div style="background-color: yellow;"><storybook-button-component text="Button"></storybook-button-component></div>`,
|
||||
});
|
||||
Fullscreen.parameters = { layout: 'fullscreen' };
|
||||
|
||||
export const Centered: StoryFn = () => ({
|
||||
props: { text: 'Button' },
|
||||
});
|
||||
Centered.parameters = { layout: 'centered' };
|
||||
|
||||
export const Padded: StoryFn = () => ({
|
||||
props: { text: 'Button' },
|
||||
});
|
||||
Padded.parameters = { layout: 'padded' };
|
||||
|
||||
export const None: StoryFn = () => ({
|
||||
props: { text: 'Button' },
|
||||
});
|
||||
None.parameters = { layout: 'none' };
|
||||
@ -1,27 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Core / Story host styles With Args 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-button-component
|
||||
_ngcontent-a-c160=""
|
||||
ng-reflect-text="Button with custom styles"
|
||||
>
|
||||
<button>
|
||||
Button with custom styles
|
||||
</button>
|
||||
</storybook-button-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / Story host styles With story template 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-button-component
|
||||
_ngcontent-a-c159=""
|
||||
ng-reflect-text="Button with custom styles"
|
||||
>
|
||||
<button>
|
||||
Button with custom styles
|
||||
</button>
|
||||
</storybook-button-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,13 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Legacy / Component in Story Basic 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-button-component
|
||||
ng-reflect-text="Hello Button"
|
||||
>
|
||||
<button>
|
||||
Hello Button
|
||||
</button>
|
||||
</storybook-button-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,13 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Others / Issues / 12009 unknown component Basic 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-button-component
|
||||
ng-reflect-text="Unknown component"
|
||||
>
|
||||
<button>
|
||||
Unknown component
|
||||
</button>
|
||||
</storybook-button-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,21 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Others / NgRx / Store With Component 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-comp-with-store>
|
||||
<div>
|
||||
Store is injected
|
||||
</div>
|
||||
</storybook-comp-with-store>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Others / NgRx / Store With Template 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-comp-with-store>
|
||||
<div>
|
||||
Store is injected
|
||||
</div>
|
||||
</storybook-comp-with-store>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,50 +0,0 @@
|
||||
import { Store, StoreModule } from '@ngrx/store';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'storybook-comp-with-store',
|
||||
template: '<div>{{this.getStoreState()}}</div>',
|
||||
})
|
||||
class WithStoreComponent {
|
||||
private store: Store<any>;
|
||||
|
||||
constructor(store: Store<any>) {
|
||||
this.store = store;
|
||||
}
|
||||
|
||||
getStoreState() {
|
||||
return this.store === undefined ? 'Store is NOT injected' : 'Store is injected';
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
title: 'Others / NgRx / Store',
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [
|
||||
StoreModule.forRoot(
|
||||
{},
|
||||
{
|
||||
runtimeChecks: {
|
||||
strictStateImmutability: true,
|
||||
strictActionImmutability: true,
|
||||
strictStateSerializability: true,
|
||||
strictActionSerializability: true,
|
||||
},
|
||||
}
|
||||
),
|
||||
],
|
||||
declarations: [WithStoreComponent],
|
||||
}),
|
||||
],
|
||||
} as Meta;
|
||||
|
||||
export const WithComponent: StoryFn = () => ({
|
||||
component: WithStoreComponent,
|
||||
});
|
||||
|
||||
export const WithTemplate: StoryFn = () => ({
|
||||
template: `<storybook-comp-with-store></storybook-comp-with-store>`,
|
||||
});
|
||||
@ -0,0 +1,7 @@
|
||||
<button [disabled]="isDisabled" [ngClass]="classes" #buttonRef>
|
||||
<img
|
||||
width="100"
|
||||
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
|
||||
/>
|
||||
{{ label }}
|
||||
</button>
|
||||
@ -0,0 +1,3 @@
|
||||
.btn-primary {
|
||||
background-color: #ff9899;
|
||||
}
|
||||
@ -0,0 +1,233 @@
|
||||
/* eslint-disable no-console */
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
import {
|
||||
Component,
|
||||
ElementRef,
|
||||
EventEmitter,
|
||||
HostBinding,
|
||||
HostListener,
|
||||
Input,
|
||||
Output,
|
||||
ViewChild,
|
||||
} from '@angular/core';
|
||||
|
||||
export const exportedConstant = 'An exported constant';
|
||||
|
||||
export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge';
|
||||
|
||||
export interface ISomeInterface {
|
||||
one: string;
|
||||
two: boolean;
|
||||
three: any[];
|
||||
}
|
||||
|
||||
export enum ButtonAccent {
|
||||
'Normal' = 'Normal',
|
||||
'High' = 'High',
|
||||
}
|
||||
|
||||
/**
|
||||
* This is a simple button that demonstrates various JSDoc handling in Storybook Docs for Angular.
|
||||
*
|
||||
* It supports [markdown](https://en.wikipedia.org/wiki/Markdown), so you can embed formatted text,
|
||||
* like **bold**, _italic_, and `inline code`.
|
||||
*
|
||||
* > How you like dem apples?! It's never been easier to document all your components.
|
||||
*
|
||||
* @string Hello world
|
||||
* @link [Example](http://example.com)
|
||||
* @code `ThingThing`
|
||||
* @html <span class="badge">aaa</span>
|
||||
*/
|
||||
@Component({
|
||||
selector: 'my-button',
|
||||
templateUrl: './doc-button.component.html',
|
||||
styleUrls: ['./doc-button.component.scss'],
|
||||
})
|
||||
export class DocButtonComponent<T> {
|
||||
@ViewChild('buttonRef', { static: false }) buttonRef!: ElementRef;
|
||||
|
||||
/** Test default value. */
|
||||
@Input()
|
||||
public theDefaultValue = 'Default value in component';
|
||||
|
||||
/**
|
||||
* Setting default value here because compodoc won't get the default value for accessors
|
||||
* @default Another default value
|
||||
* */
|
||||
@Input()
|
||||
get anotherDefaultValue() {
|
||||
return this._anotherDefaultValue;
|
||||
}
|
||||
|
||||
set anotherDefaultValue(v: string) {
|
||||
this._anotherDefaultValue = v;
|
||||
}
|
||||
|
||||
_anotherDefaultValue = 'Another default value';
|
||||
|
||||
/** Test null default value. */
|
||||
@Input()
|
||||
public aNullValue = null;
|
||||
|
||||
/** Test null default value. */
|
||||
@Input()
|
||||
// @ts-expect-error intentionally undefined
|
||||
public anUndefinedValue;
|
||||
|
||||
/** Test numeric default value. */
|
||||
@Input()
|
||||
public aNumericValue = 123;
|
||||
|
||||
/** Appearance style of the button. */
|
||||
@Input()
|
||||
public appearance: 'primary' | 'secondary' = 'secondary';
|
||||
|
||||
/** Sets the button to a disabled state. */
|
||||
@Input()
|
||||
public isDisabled = false;
|
||||
|
||||
/** Specify the accent-type of the button */
|
||||
@Input()
|
||||
public accent: ButtonAccent = ButtonAccent.Normal;
|
||||
|
||||
/** Specifies some arbitrary object. This comment is to test certain chars like apostrophes - it's working */
|
||||
@Input() public someDataObject!: ISomeInterface;
|
||||
|
||||
/**
|
||||
* The inner text of the button.
|
||||
*
|
||||
* @required
|
||||
*/
|
||||
@Input()
|
||||
public label!: string;
|
||||
|
||||
/** Size of the button. */
|
||||
@Input()
|
||||
public size?: ButtonSize = 'medium';
|
||||
|
||||
/**
|
||||
* Some input you shouldn't use.
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
@Input()
|
||||
public somethingYouShouldNotUse = false;
|
||||
|
||||
/**
|
||||
* Handler to be called when the button is clicked by a user.
|
||||
*
|
||||
* Will also block the emission of the event if `isDisabled` is true.
|
||||
*/
|
||||
@Output()
|
||||
public onClick = new EventEmitter<Event>();
|
||||
|
||||
/**
|
||||
* This is an internal method that we don't want to document and have added the `ignore` annotation to.
|
||||
*
|
||||
* @ignore
|
||||
*/
|
||||
public handleClick(event: Event) {
|
||||
event.stopPropagation();
|
||||
|
||||
if (!this.isDisabled) {
|
||||
this.onClick.emit(event);
|
||||
}
|
||||
}
|
||||
|
||||
private _inputValue = 'some value';
|
||||
|
||||
/** Setter for `inputValue` that is also an `@Input`. */
|
||||
@Input()
|
||||
public set inputValue(value: string) {
|
||||
this._inputValue = value;
|
||||
}
|
||||
|
||||
/** Getter for `inputValue`. */
|
||||
public get inputValue() {
|
||||
return this._inputValue;
|
||||
}
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
onClickListener(event: Event) {
|
||||
console.log('button', event.target);
|
||||
this.handleClick(event);
|
||||
}
|
||||
|
||||
@HostBinding('class.focused') focus = false;
|
||||
|
||||
/**
|
||||
* Returns all the CSS classes for the button.
|
||||
*
|
||||
* @ignore
|
||||
*/
|
||||
public get classes(): string[] {
|
||||
return [this.appearance, this.size]
|
||||
.filter((_class) => !!_class)
|
||||
.map((_class) => `btn-${_class}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
public ignoredProperty = 'Ignore me';
|
||||
|
||||
/** Public value. */
|
||||
public internalProperty = 'Public hello';
|
||||
|
||||
/** Private value. */
|
||||
private _value = 'Private hello';
|
||||
|
||||
/** Set the private value. */
|
||||
public set value(value: string | number) {
|
||||
this._value = `${value}`;
|
||||
}
|
||||
|
||||
/** Get the private value. */
|
||||
public get value(): string | number {
|
||||
return this._value;
|
||||
}
|
||||
|
||||
/**
|
||||
* An internal calculation method which adds `x` and `y` together.
|
||||
*
|
||||
* @param x Some number you'd like to use.
|
||||
* @param y Some other number or string you'd like to use, will have `parseInt()` applied before calculation.
|
||||
*/
|
||||
public calc(x: number, y: string | number): number {
|
||||
return x + parseInt(`${y}`, 10);
|
||||
}
|
||||
|
||||
/** A public method using an interface. */
|
||||
public publicMethod(things: ISomeInterface) {
|
||||
console.log(things);
|
||||
}
|
||||
|
||||
/**
|
||||
* A protected method.
|
||||
*
|
||||
* @param id Some `id`.
|
||||
*/
|
||||
protected protectedMethod(id?: number) {
|
||||
console.log(id);
|
||||
}
|
||||
|
||||
/**
|
||||
* A private method.
|
||||
*
|
||||
* @param password Some `password`.
|
||||
*/
|
||||
private privateMethod(password: string) {
|
||||
console.log(password);
|
||||
}
|
||||
|
||||
@Input('showKeyAlias')
|
||||
public showKey!: keyof T;
|
||||
|
||||
@Input()
|
||||
public set item(item: T[]) {
|
||||
this.processedItem = item;
|
||||
}
|
||||
|
||||
public processedItem!: T[];
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
import { Args } from '@storybook/angular';
|
||||
import { DocButtonComponent } from './doc-button.component';
|
||||
|
||||
export default {
|
||||
component: DocButtonComponent,
|
||||
};
|
||||
|
||||
export const Basic = (args: Args) => ({
|
||||
props: args,
|
||||
});
|
||||
Basic.args = { label: 'Args test', isDisabled: false };
|
||||
Basic.ArgTypes = {
|
||||
theDefaultValue: {
|
||||
table: {
|
||||
defaultValue: { summary: 'Basic default value' },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const WithTemplate = (args: Args) => ({
|
||||
props: args,
|
||||
template: '<my-button [label]="label" [appearance]="appearance"></my-button>',
|
||||
});
|
||||
WithTemplate.args = { label: 'Template test', appearance: 'primary' };
|
||||
@ -0,0 +1,25 @@
|
||||
/* eslint-disable no-useless-constructor */
|
||||
import { Directive, ElementRef, AfterViewInit, Input } from '@angular/core';
|
||||
|
||||
/**
|
||||
* This is an Angular Directive
|
||||
* example that has a Prop Table.
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[docDirective]',
|
||||
})
|
||||
export class DocDirective implements AfterViewInit {
|
||||
constructor(private ref: ElementRef) {}
|
||||
|
||||
/**
|
||||
* Will apply gray background color
|
||||
* if set to true.
|
||||
*/
|
||||
@Input() hasGrayBackground = false;
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
if (this.hasGrayBackground) {
|
||||
this.ref.nativeElement.style = 'background-color: lightgray';
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
import { DocDirective } from './doc-directive.directive';
|
||||
|
||||
export default {
|
||||
component: DocDirective,
|
||||
};
|
||||
|
||||
const modules = {
|
||||
declarations: [DocDirective],
|
||||
};
|
||||
|
||||
export const Basic = () => ({
|
||||
moduleMetadata: modules,
|
||||
template: '<div docDirective [hasGrayBackground]="true"><h1>DocDirective</h1></div>',
|
||||
});
|
||||
@ -0,0 +1,27 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpHeaders } from '@angular/common/http';
|
||||
|
||||
/**
|
||||
* This is an Angular Injectable
|
||||
* example that has a Prop Table.
|
||||
*/
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class DocInjectableService {
|
||||
/**
|
||||
* Auth headers to use.
|
||||
*/
|
||||
auth: any;
|
||||
|
||||
constructor() {
|
||||
this.auth = new HttpHeaders({ 'Content-Type': 'application/json' });
|
||||
}
|
||||
|
||||
/**
|
||||
* Get posts from Backend.
|
||||
*/
|
||||
getPosts() {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
import { DocInjectableService } from './doc-injectable.service';
|
||||
|
||||
export default {
|
||||
component: DocInjectableService,
|
||||
parameters: {
|
||||
controls: { hideNoControlsWarning: true },
|
||||
},
|
||||
};
|
||||
|
||||
const modules = {
|
||||
provider: [DocInjectableService],
|
||||
};
|
||||
|
||||
export const Basic = () => ({
|
||||
moduleMetadata: modules,
|
||||
template: '<div><h1>DocInjectable</h1></div>',
|
||||
});
|
||||
@ -0,0 +1,18 @@
|
||||
import { Pipe, PipeTransform } from '@angular/core';
|
||||
|
||||
/**
|
||||
* This is an Angular Pipe
|
||||
* example that has a Prop Table.
|
||||
*/
|
||||
@Pipe({
|
||||
name: 'docPipe',
|
||||
})
|
||||
export class DocPipe implements PipeTransform {
|
||||
/**
|
||||
* Transforms a string into uppercase.
|
||||
* @param value string
|
||||
*/
|
||||
transform(value: string): string {
|
||||
return value?.toUpperCase();
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
import { DocPipe } from './doc-pipe.pipe';
|
||||
|
||||
export default {
|
||||
component: DocPipe,
|
||||
parameters: {
|
||||
controls: { hideNoControlsWarning: true },
|
||||
},
|
||||
};
|
||||
|
||||
const modules = {
|
||||
declarations: [DocPipe],
|
||||
};
|
||||
|
||||
export const Basic = () => ({
|
||||
moduleMetadata: modules,
|
||||
template: `<div><h1>{{ 'DocPipe' | docPipe }}</h1></div>`,
|
||||
});
|
||||
@ -1,6 +1,6 @@
|
||||
import { Meta } from '@storybook/addon-docs';
|
||||
|
||||
<Meta title="Basics / Readme" />
|
||||
<Meta title="stories / frameworks / angular / basics / README" />
|
||||
|
||||
# Examples for Angular features
|
||||
|
||||
@ -3,7 +3,7 @@ import { moduleMetadata, Meta, StoryFn } from '@storybook/angular';
|
||||
import { CustomCvaComponent } from './custom-cva.component';
|
||||
|
||||
export default {
|
||||
title: 'Basics / Angular forms / ControlValueAccessor',
|
||||
// title: 'Basics / Angular forms / ControlValueAccessor',
|
||||
component: CustomCvaComponent,
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
@ -18,7 +18,7 @@ const NOOP = () => {};
|
||||
],
|
||||
})
|
||||
export class CustomCvaComponent implements ControlValueAccessor {
|
||||
disabled: boolean;
|
||||
disabled?: boolean;
|
||||
|
||||
protected onChange: (value: any) => void = NOOP;
|
||||
|
||||
@ -6,7 +6,8 @@ import { AttributeSelectorComponent } from './attribute-selector.component';
|
||||
import { ClassSelectorComponent } from './class-selector.component';
|
||||
|
||||
export default {
|
||||
title: 'Basics / Component / With Complex Selectors',
|
||||
// title: 'Basics / Component / With Complex Selectors',
|
||||
component: MultipleClassSelectorComponent,
|
||||
};
|
||||
|
||||
export const MultipleSelectors = () => ({
|
||||
@ -7,7 +7,7 @@ import {
|
||||
} from './enums.component';
|
||||
|
||||
export default {
|
||||
title: 'Basics / Component / With Enum Types',
|
||||
// title: 'Basics / Component / With Enum Types',
|
||||
component: EnumsComponent,
|
||||
} as Meta;
|
||||
|
||||
@ -9,22 +9,22 @@ import { Component, Input } from '@angular/core';
|
||||
})
|
||||
export class EnumsComponent {
|
||||
/** Union Type of string literals */
|
||||
@Input() unionType: 'Union A' | 'Union B' | 'Union C';
|
||||
@Input() unionType?: 'Union A' | 'Union B' | 'Union C';
|
||||
|
||||
/** Union Type assigned as a Type Alias */
|
||||
@Input() aliasedUnionType: TypeAlias;
|
||||
@Input() aliasedUnionType?: TypeAlias;
|
||||
|
||||
/** Base Enum Type with no assigned values */
|
||||
@Input() enumNumeric: EnumNumeric;
|
||||
@Input() enumNumeric?: EnumNumeric;
|
||||
|
||||
/** Enum with initial numeric value and auto-incrementing subsequent values */
|
||||
@Input() enumNumericInitial: EnumNumericInitial;
|
||||
@Input() enumNumericInitial?: EnumNumericInitial;
|
||||
|
||||
/** Enum with string values */
|
||||
@Input() enumStrings: EnumStringValues;
|
||||
@Input() enumStrings?: EnumStringValues;
|
||||
|
||||
/** Type Aliased Enum Type */
|
||||
@Input() enumAlias: EnumAlias;
|
||||
@Input() enumAlias?: EnumAlias;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -6,5 +6,5 @@ import { Component, Input } from '@angular/core';
|
||||
})
|
||||
export class BaseButtonComponent {
|
||||
@Input()
|
||||
label: string;
|
||||
label?: string;
|
||||
}
|
||||
@ -7,5 +7,5 @@ import { BaseButtonComponent } from './base-button.component';
|
||||
})
|
||||
export class IconButtonComponent extends BaseButtonComponent {
|
||||
@Input()
|
||||
icon: string;
|
||||
icon?: string;
|
||||
}
|
||||
@ -2,7 +2,8 @@ import { IconButtonComponent } from './icon-button.component';
|
||||
import { BaseButtonComponent } from './base-button.component';
|
||||
|
||||
export default {
|
||||
title: 'Basics / Component / With Inheritance',
|
||||
// title: 'Basics / Component / With Inheritance',
|
||||
component: IconButtonComponent,
|
||||
};
|
||||
|
||||
export const IconButton = () => ({
|
||||
@ -20,7 +20,7 @@ class SbButtonComponent {
|
||||
}
|
||||
|
||||
export default {
|
||||
title: 'Basics / Component / With ng-content / Button with different contents',
|
||||
// title: 'Basics / Component / With ng-content / Button with different contents',
|
||||
// Implicitly declares the component to Angular
|
||||
// This will be the component described by the addon docs
|
||||
component: SbButtonComponent,
|
||||
@ -28,7 +28,8 @@ export default {
|
||||
// Wrap all stories with this template
|
||||
componentWrapperDecorator(
|
||||
(story) => `<sb-button [color]="propsColor">${story}</sb-button>`,
|
||||
({ args }) => ({ propsColor: args.color })
|
||||
// eslint-disable-next-line dot-notation
|
||||
({ args }) => ({ propsColor: args['color'] })
|
||||
),
|
||||
],
|
||||
argTypes: {
|
||||
@ -45,7 +46,8 @@ export const EmptyButton: StoryFn = () => ({
|
||||
});
|
||||
|
||||
export const WithDynamicContentAndArgs: StoryFn = (args) => ({
|
||||
template: `${args.content}`,
|
||||
// eslint-disable-next-line dot-notation
|
||||
template: `${args['content']}`,
|
||||
});
|
||||
WithDynamicContentAndArgs.argTypes = {
|
||||
content: { control: 'text' },
|
||||
@ -10,7 +10,7 @@ import type { Meta, StoryFn } from '@storybook/angular/';
|
||||
class WithNgContentComponent {}
|
||||
|
||||
export default {
|
||||
title: 'Basics / Component / With ng-content / Simple',
|
||||
// title: 'Basics / Component / With ng-content / Simple',
|
||||
component: WithNgContentComponent,
|
||||
} as Meta;
|
||||
|
||||
@ -21,7 +21,8 @@ export const Default: StoryFn = () => ({
|
||||
});
|
||||
|
||||
export const WithDynamicContentAndArgs: StoryFn = (args) => ({
|
||||
template: `<storybook-with-ng-content><h1>${args.content}</h1></storybook-with-ng-content>`,
|
||||
// eslint-disable-next-line dot-notation
|
||||
template: `<storybook-with-ng-content><h1>${args['content']}</h1></storybook-with-ng-content>`,
|
||||
});
|
||||
WithDynamicContentAndArgs.argTypes = {
|
||||
content: { control: 'text' },
|
||||
@ -7,7 +7,7 @@ import type { Meta, StoryFn } from '@storybook/angular';
|
||||
📝 The current time in console should no longer display after a change of story`,
|
||||
})
|
||||
class OnDestroyComponent implements OnInit, OnDestroy {
|
||||
time: string;
|
||||
time?: string;
|
||||
|
||||
interval: any;
|
||||
|
||||
@ -28,7 +28,7 @@ class OnDestroyComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
|
||||
export default {
|
||||
title: 'Basics / Component / with ngOnDestroy',
|
||||
// title: 'Basics / Component / with ngOnDestroy',
|
||||
component: OnDestroyComponent,
|
||||
parameters: {
|
||||
// disabled due to new Date()
|
||||
@ -15,7 +15,7 @@ import { Component, Input, ChangeDetectionStrategy, HostBinding } from '@angular
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class OnPushBoxComponent {
|
||||
@Input() word: string;
|
||||
@Input() word?: string;
|
||||
|
||||
@Input() @HostBinding('style.background-color') bgColor: string;
|
||||
@Input() @HostBinding('style.background-color') bgColor?: string;
|
||||
}
|
||||
@ -2,7 +2,7 @@ import { Meta, StoryFn } from '@storybook/angular';
|
||||
import { OnPushBoxComponent } from './on-push-box.component';
|
||||
|
||||
export default {
|
||||
title: 'Basics / Component / With OnPush strategy',
|
||||
// title: 'Basics / Component / With OnPush strategy',
|
||||
component: OnPushBoxComponent,
|
||||
argTypes: {
|
||||
word: { control: 'text' },
|
||||
@ -4,7 +4,7 @@ import { CustomPipePipe } from './custom.pipe';
|
||||
import { WithPipeComponent } from './with-pipe.component';
|
||||
|
||||
export default {
|
||||
title: 'Basics / Component / With Pipes',
|
||||
// title: 'Basics / Component / With Pipes',
|
||||
component: WithPipeComponent,
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
@ -6,5 +6,5 @@ import { Component, Input } from '@angular/core';
|
||||
})
|
||||
export class WithPipeComponent {
|
||||
@Input()
|
||||
field;
|
||||
field: any;
|
||||
}
|
||||
@ -1,7 +1,8 @@
|
||||
import type { Args } from '@storybook/angular';
|
||||
import { DiComponent } from './di.component';
|
||||
|
||||
export default {
|
||||
title: 'Basics / Component / With Provider',
|
||||
// title: 'Basics / Component / With Provider',
|
||||
component: DiComponent,
|
||||
};
|
||||
|
||||
@ -13,7 +14,7 @@ export const InputsAndInjectDependencies = () => ({
|
||||
|
||||
InputsAndInjectDependencies.storyName = 'inputs and inject dependencies';
|
||||
|
||||
export const InputsAndInjectDependenciesWithArgs = (args) => ({
|
||||
export const InputsAndInjectDependenciesWithArgs = (args: Args) => ({
|
||||
props: args,
|
||||
});
|
||||
InputsAndInjectDependenciesWithArgs.storyName = 'inputs and inject dependencies with args';
|
||||
@ -11,7 +11,7 @@ export const TEST_TOKEN = new InjectionToken<string>('test');
|
||||
})
|
||||
export class DiComponent {
|
||||
@Input()
|
||||
title: string;
|
||||
title?: string;
|
||||
|
||||
constructor(
|
||||
protected injector: Injector,
|
||||
@ -1,7 +1,7 @@
|
||||
import { StyledComponent } from './styled.component';
|
||||
|
||||
export default {
|
||||
title: 'Basics / Component / With StyleUrls',
|
||||
// title: 'Basics / Component / With StyleUrls',
|
||||
component: StyledComponent,
|
||||
};
|
||||
|
||||
@ -3,7 +3,7 @@ import { componentWrapperDecorator, moduleMetadata, StoryFn, Meta } from '@story
|
||||
import { WithoutSelectorComponent, WITHOUT_SELECTOR_DATA } from './without-selector.component';
|
||||
|
||||
export default {
|
||||
title: 'Basics / Component / without selector / Custom wrapper *NgComponentOutlet',
|
||||
// title: 'Basics / Component / without selector / Custom wrapper *NgComponentOutlet',
|
||||
component: WithoutSelectorComponent,
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
@ -22,15 +22,15 @@ export default {
|
||||
})
|
||||
class NgComponentOutletWrapperComponent implements OnInit {
|
||||
@Input()
|
||||
componentOutlet: Type<unknown>;
|
||||
componentOutlet?: Type<unknown>;
|
||||
|
||||
@Input()
|
||||
name: string;
|
||||
name?: string;
|
||||
|
||||
@Input()
|
||||
color: string;
|
||||
color?: string;
|
||||
|
||||
componentInjector: Injector;
|
||||
componentInjector?: Injector;
|
||||
|
||||
componentContent = [
|
||||
[document.createTextNode('Ng-content : Inspired by ')],
|
||||
@ -67,7 +67,8 @@ WithCustomNgComponentOutletWrapper.decorators = [
|
||||
}),
|
||||
componentWrapperDecorator(NgComponentOutletWrapperComponent, (args) => ({
|
||||
name: args.name,
|
||||
color: args.color,
|
||||
// eslint-disable-next-line dot-notation
|
||||
color: args['color'],
|
||||
componentOutlet: WithoutSelectorComponent,
|
||||
})),
|
||||
];
|
||||
@ -12,7 +12,7 @@ import { componentWrapperDecorator, moduleMetadata, StoryFn, Meta } from '@story
|
||||
import { WithoutSelectorComponent } from './without-selector.component';
|
||||
|
||||
export default {
|
||||
title: 'Basics / Component / without selector / Custom wrapper ComponentFactoryResolver',
|
||||
// title: 'Basics / Component / without selector / Custom wrapper ComponentFactoryResolver',
|
||||
component: WithoutSelectorComponent,
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
@ -25,10 +25,10 @@ export default {
|
||||
|
||||
@Component({ selector: 'component-factory-wrapper', template: '' })
|
||||
class ComponentFactoryWrapperComponent implements AfterViewInit {
|
||||
@ViewChild('dynamicInsert', { read: ViewContainerRef }) dynamicInsert;
|
||||
@ViewChild('dynamicInsert', { read: ViewContainerRef }) dynamicInsert: any;
|
||||
|
||||
@Input()
|
||||
componentOutlet: Type<unknown>;
|
||||
componentOutlet?: Type<unknown>;
|
||||
|
||||
@Input()
|
||||
args: any;
|
||||
@ -41,12 +41,12 @@ class ComponentFactoryWrapperComponent implements AfterViewInit {
|
||||
|
||||
ngAfterViewInit() {
|
||||
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
|
||||
this.componentOutlet
|
||||
this.componentOutlet!
|
||||
);
|
||||
const containerRef = this.viewContainerRef;
|
||||
containerRef.clear();
|
||||
const dynamicComponent = containerRef.createComponent(componentFactory);
|
||||
Object.assign(dynamicComponent.instance, this.args);
|
||||
Object.assign(dynamicComponent.instance as any, this.args);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ import { moduleMetadata, StoryFn, Meta } from '@storybook/angular';
|
||||
import { WithoutSelectorComponent, WITHOUT_SELECTOR_DATA } from './without-selector.component';
|
||||
|
||||
export default {
|
||||
title: 'Basics / Component / without selector',
|
||||
// title: 'Basics / Component / without selector',
|
||||
component: WithoutSelectorComponent,
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
@ -19,7 +19,8 @@ export const WithInjectionTokenAndArgs: StoryFn = (args) => ({
|
||||
props: args,
|
||||
moduleMetadata: {
|
||||
providers: [
|
||||
{ provide: WITHOUT_SELECTOR_DATA, useValue: { color: args.color, name: args.name } },
|
||||
// eslint-disable-next-line dot-notation
|
||||
{ provide: WITHOUT_SELECTOR_DATA, useValue: { color: args['color'], name: args['name'] } },
|
||||
],
|
||||
},
|
||||
});
|
||||
@ -48,7 +48,7 @@ import { CHIP_COLOR } from './chip-color.token';
|
||||
],
|
||||
})
|
||||
export class ChipComponent {
|
||||
@Input() displayText: string;
|
||||
@Input() displayText?: string;
|
||||
|
||||
@Output() removeClicked = new EventEmitter();
|
||||
|
||||
@ -38,7 +38,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
],
|
||||
})
|
||||
export class ChipsGroupComponent {
|
||||
@Input() chips: {
|
||||
@Input() chips?: {
|
||||
id: number;
|
||||
text: string;
|
||||
}[];
|
||||
@ -4,7 +4,7 @@ import { ChipsGroupComponent } from './angular-src/chips-group.component';
|
||||
import { CHIP_COLOR } from './angular-src/chip-color.token';
|
||||
|
||||
export default {
|
||||
title: 'Basics / NgModule / forRoot() pattern',
|
||||
// title: 'Basics / NgModule / forRoot() pattern',
|
||||
component: ChipsGroupComponent,
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
@ -4,7 +4,8 @@ import { ChipsGroupComponent } from './angular-src/chips-group.component';
|
||||
import { ChipComponent } from './angular-src/chip.component';
|
||||
|
||||
export default {
|
||||
title: 'Basics / NgModule / Module with multiple component',
|
||||
// title: 'Basics / NgModule / Module with multiple component',
|
||||
component: ChipsGroupComponent,
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [ChipsModule],
|
||||
26
code/frameworks/angular/template/stories/button.component.ts
Normal file
26
code/frameworks/angular/template/stories/button.component.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'storybook-button-component',
|
||||
template: ` <button (click)="onClick.emit($event)">{{ text }}</button> `,
|
||||
styles: [
|
||||
`
|
||||
button {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 3px;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
padding: 3px 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
`,
|
||||
],
|
||||
})
|
||||
export default class ButtonComponent {
|
||||
@Input()
|
||||
text = '';
|
||||
|
||||
@Output()
|
||||
onClick = new EventEmitter<any>();
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'child-component',
|
||||
template: `
|
||||
Child<br />
|
||||
Input text: {{ childText }} <br />
|
||||
Output : <button (click)="onClickChild.emit($event)">Click here !</button> <br />
|
||||
Private text: {{ childPrivateText }} <br />
|
||||
`,
|
||||
})
|
||||
export default class ChildComponent {
|
||||
@Input()
|
||||
childText = '';
|
||||
|
||||
childPrivateText = '';
|
||||
|
||||
@Output()
|
||||
onClickChild = new EventEmitter<any>();
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
import { Meta } from '@storybook/addon-docs';
|
||||
|
||||
<Meta title="Core / Readme" />
|
||||
<Meta title="stories / frameworks / angular / core / README" />
|
||||
|
||||
# Examples for Storybook native features
|
||||
|
||||
@ -5,7 +5,7 @@ import ChildComponent from './child.component';
|
||||
import ParentComponent from './parent.component';
|
||||
|
||||
export default {
|
||||
title: 'Core / Decorators / ComponentWrapperDecorator',
|
||||
// title: 'Core / Decorators / ComponentWrapperDecorator',
|
||||
component: ChildComponent,
|
||||
decorators: [
|
||||
componentWrapperDecorator(
|
||||
@ -0,0 +1,20 @@
|
||||
import { Args, componentWrapperDecorator, Meta } from '@storybook/angular';
|
||||
|
||||
export const Base = (args: Args) => ({
|
||||
template: 'Change theme with the brush in toolbar',
|
||||
props: {
|
||||
...args,
|
||||
},
|
||||
});
|
||||
|
||||
export default {
|
||||
// title: 'Core / Decorators / Theme Decorators',
|
||||
component: Base,
|
||||
decorators: [
|
||||
componentWrapperDecorator(
|
||||
(story) => `<div [class]="myTheme">${story}</div>`,
|
||||
// eslint-disable-next-line dot-notation
|
||||
({ globals }) => ({ myTheme: `${globals['theme']}-theme` })
|
||||
),
|
||||
],
|
||||
} as Meta;
|
||||
@ -11,15 +11,15 @@ import { DummyService } from './dummy.service';
|
||||
`,
|
||||
})
|
||||
export class ServiceComponent implements OnInit {
|
||||
items: {};
|
||||
items?: {};
|
||||
|
||||
@Input()
|
||||
name: any;
|
||||
name?: any;
|
||||
|
||||
// eslint-disable-next-line no-useless-constructor
|
||||
constructor(private dummy: DummyService) {}
|
||||
|
||||
async ngOnInit() {
|
||||
this.items = await this.dummy.getItems();
|
||||
this.items = (await this.dummy.getItems()) as any;
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,24 @@
|
||||
import { moduleMetadata, StoryFn, Meta } from '@storybook/angular';
|
||||
import { TokenComponent, ITEMS, DEFAULT_NAME } from './angular-src/token.component';
|
||||
|
||||
export const Story1: StoryFn = () => ({
|
||||
template: `<storybook-simple-token-component [name]="name"></storybook-simple-token-component>`,
|
||||
props: {
|
||||
name: 'Prop Name',
|
||||
},
|
||||
});
|
||||
|
||||
Story1.storyName = 'Story 1';
|
||||
|
||||
export const Story2: StoryFn = () => ({
|
||||
template: `<storybook-simple-token-component></storybook-simple-token-component>`,
|
||||
});
|
||||
|
||||
Story2.storyName = 'Story 2';
|
||||
|
||||
export default {
|
||||
title: 'Core / ModuleMetadata / In export default with decorator',
|
||||
// title: 'Core / ModuleMetadata / In export default with decorator',
|
||||
component: Story1,
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [],
|
||||
@ -20,18 +36,3 @@ export default {
|
||||
}),
|
||||
],
|
||||
} as Meta;
|
||||
|
||||
export const Story1: StoryFn = () => ({
|
||||
template: `<storybook-simple-token-component [name]="name"></storybook-simple-token-component>`,
|
||||
props: {
|
||||
name: 'Prop Name',
|
||||
},
|
||||
});
|
||||
|
||||
Story1.storyName = 'Story 1';
|
||||
|
||||
export const Story2: StoryFn = () => ({
|
||||
template: `<storybook-simple-token-component></storybook-simple-token-component>`,
|
||||
});
|
||||
|
||||
Story2.storyName = 'Story 2';
|
||||
@ -1,10 +1,6 @@
|
||||
import type { Meta, StoryFn } from '@storybook/angular';
|
||||
import { TokenComponent, ITEMS, DEFAULT_NAME } from './angular-src/token.component';
|
||||
|
||||
export default {
|
||||
title: 'Core / ModuleMetadata / In stories',
|
||||
} as Meta;
|
||||
|
||||
export const Individual1: StoryFn = () => ({
|
||||
template: `<storybook-simple-token-component [name]="name"></storybook-simple-token-component>`,
|
||||
props: {
|
||||
@ -43,3 +39,8 @@ export const Individual2: StoryFn = () => ({
|
||||
});
|
||||
|
||||
Individual2.storyName = 'Individual 2';
|
||||
|
||||
export default {
|
||||
// title: 'Core / ModuleMetadata / In stories',
|
||||
component: Individual1,
|
||||
} as Meta;
|
||||
@ -2,8 +2,21 @@ import { moduleMetadata, Meta, StoryFn } from '@storybook/angular';
|
||||
import { TokenComponent, ITEMS, DEFAULT_NAME } from './angular-src/token.component';
|
||||
import { CustomPipePipe } from './angular-src/custom.pipe';
|
||||
|
||||
export const MergeWithDefaultModuleMetadata: StoryFn = () => ({
|
||||
template: `<storybook-simple-token-component [name]="name | customPipe"></storybook-simple-token-component>`,
|
||||
props: {
|
||||
name: 'Prop Name',
|
||||
},
|
||||
moduleMetadata: {
|
||||
declarations: [CustomPipePipe],
|
||||
providers: [],
|
||||
},
|
||||
});
|
||||
MergeWithDefaultModuleMetadata.storyName = 'Merge with default ModuleMetadata';
|
||||
|
||||
export default {
|
||||
title: 'Core / ModuleMetadata / Merge default and story',
|
||||
// title: 'Core / ModuleMetadata / Merge default and story',
|
||||
component: MergeWithDefaultModuleMetadata,
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
declarations: [TokenComponent],
|
||||
@ -20,15 +33,3 @@ export default {
|
||||
}),
|
||||
],
|
||||
} as Meta;
|
||||
|
||||
export const MergeWithDefaultModuleMetadata: StoryFn = () => ({
|
||||
template: `<storybook-simple-token-component [name]="name | customPipe"></storybook-simple-token-component>`,
|
||||
props: {
|
||||
name: 'Prop Name',
|
||||
},
|
||||
moduleMetadata: {
|
||||
declarations: [CustomPipePipe],
|
||||
providers: [],
|
||||
},
|
||||
});
|
||||
MergeWithDefaultModuleMetadata.storyName = 'Merge with default ModuleMetadata';
|
||||
@ -10,13 +10,13 @@ import { Component } from '@angular/core';
|
||||
class ComponentWithWhitespace {}
|
||||
|
||||
export default {
|
||||
title: 'Core / Parameters / With Bootstrap Options',
|
||||
// title: 'Core / Parameters / With Bootstrap Options',
|
||||
component: ComponentWithWhitespace,
|
||||
parameters: {
|
||||
bootstrapOptions: {
|
||||
preserveWhitespaces: true,
|
||||
},
|
||||
},
|
||||
component: ComponentWithWhitespace,
|
||||
} as Meta;
|
||||
|
||||
export const WithPreserveWhitespaces: StoryFn = (_args) => ({});
|
||||
@ -1,14 +1,5 @@
|
||||
import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
|
||||
import { Button } from '../../angular-demo';
|
||||
|
||||
export default {
|
||||
title: 'Core / Story host styles',
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
declarations: [Button],
|
||||
}),
|
||||
],
|
||||
} as Meta;
|
||||
import Button from '../../button.component';
|
||||
|
||||
export const TemplateStory: StoryFn = () => ({
|
||||
template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
|
||||
@ -47,3 +38,13 @@ WithArgsStory.argTypes = {
|
||||
WithArgsStory.args = {
|
||||
text: 'Button with custom styles',
|
||||
};
|
||||
|
||||
export default {
|
||||
// title: 'Core / Story host styles',
|
||||
component: TemplateStory,
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
declarations: [Button],
|
||||
}),
|
||||
],
|
||||
} as Meta;
|
||||
@ -1,6 +1,6 @@
|
||||
import { Meta } from '@storybook/addon-docs';
|
||||
|
||||
<Meta title="Legacy / Readme" />
|
||||
<Meta title="stories / frameworks / angular / legacy / README" />
|
||||
|
||||
# Legacy examples
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
import type { Meta, StoryFn } from '@storybook/angular';
|
||||
import { Button } from '../angular-demo';
|
||||
|
||||
export default {
|
||||
title: 'Legacy / Component in Story',
|
||||
} as Meta;
|
||||
import Button from '../button.component';
|
||||
|
||||
export const Basic: StoryFn = (args) => ({
|
||||
component: Button,
|
||||
@ -12,3 +8,8 @@ export const Basic: StoryFn = (args) => ({
|
||||
Basic.args = {
|
||||
text: 'Hello Button',
|
||||
};
|
||||
|
||||
export default {
|
||||
// title: 'Legacy / Component in Story',
|
||||
component: Basic,
|
||||
} as Meta;
|
||||
@ -1,8 +1,8 @@
|
||||
import type { Meta, StoryFn } from '@storybook/angular';
|
||||
import { Button } from '../../angular-demo';
|
||||
import Button from '../../button.component';
|
||||
|
||||
export default {
|
||||
title: 'Others / Issues / 12009 unknown component',
|
||||
// title: 'Others / Issues / 12009 unknown component',
|
||||
component: Button,
|
||||
} as Meta;
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user