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

Merge pull request #19181 from storybookjs/tom/sb-512-angular-14

Browse Source 
Angular: Add angular 14 sandbox template
This commit is contained in:
Norbert de Langen 2022-10-13 10:13:59 +03:00 committed by GitHub
commit 93570f567a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
131 changed files with 502 additions and 1820 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.circleci/config.yml
View File

@ -305,7 +305,7 @@ jobs:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 16
parallelism: 17
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
@ -324,7 +324,7 @@ jobs:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 11
parallelism: 9
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
@ -339,7 +339,7 @@ jobs:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 16
parallelism: 17
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
@ -358,7 +358,7 @@ jobs:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 16
parallelism: 15
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
@ -373,7 +373,7 @@ jobs:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 16
parallelism: 17
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
@ -388,7 +388,7 @@ jobs:
executor:
class: medium+
name: sb_playwright
parallelism: 16
parallelism: 17
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'

4
code/addons/a11y/template/stories/parameters.stories.ts
View File

@ -29,7 +29,7 @@ export const Options = {
export const Config = {
args: {
contents:
content:
'<button style="color: rgb(255, 255, 255); background-color: rgb(76, 175, 80);">Click me!</button>',
},
parameters: {
@ -45,7 +45,7 @@ export const Config = {
export const Targetted = {
args: {
contents: '<button class="custom-target">Click Me!</button>',
content: '<button class="custom-target">Click Me!</button>',
},
parameters: {
a11y: {

15
code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
View File

@ -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>
`;

57
code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot
View File

@ -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: &lt;storybook-attribute-selector foo="bar"&gt;&lt;/storybook-attribute-selector&gt;
</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: &lt;storybook-class-selector class="foo"&gt;&lt;/storybook-class-selector&gt;
</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: &lt;storybook-button&gt;&lt;/storybook-button&gt;
</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: &lt;storybook-multiple-selector&gt;&lt;/storybook-multiple-selector&gt;
</storybook-multiple-selector>
</storybook-wrapper>
`;

30
code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts
View File

@ -1,30 +0,0 @@
import {
MultipleClassSelectorComponent,
MultipleSelectorComponent,
} from './multiple-selector.component';
import { AttributeSelectorComponent } from './attribute-selector.component';
import { ClassSelectorComponent } from './class-selector.component';
export default {
title: 'Basics / Component / With Complex Selectors',
};
export const MultipleSelectors = () => ({
component: MultipleSelectorComponent,
});
MultipleSelectors.storyName = 'multiple selectors';
export const AttributeSelectors = () => ({
component: AttributeSelectorComponent,
});
AttributeSelectors.storyName = 'attribute selectors';
export const ClassSelectors = () => ({
component: ClassSelectorComponent,
});
ClassSelectors.storyName = 'class selectors';
export const MultipleClassSelectors = () => ({
component: MultipleClassSelectorComponent,
});
MultipleClassSelectors.storyName = 'multiple class selectors';

35
code/examples/angular-cli/src/stories/basics/component-with-enums/__snapshots__/enums.component.stories.storyshot
View File

@ -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>
`;

26
code/examples/angular-cli/src/stories/basics/component-with-inheritance/__snapshots__/inheritance.stories.storyshot
View File

@ -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>
`;

25
code/examples/angular-cli/src/stories/basics/component-with-inheritance/inheritance.stories.ts
View File

@ -1,25 +0,0 @@
import { IconButtonComponent } from './icon-button.component';
import { BaseButtonComponent } from './base-button.component';
export default {
title: 'Basics / Component / With Inheritance',
};
export const IconButton = () => ({
component: IconButtonComponent,
props: {
icon: 'this is icon',
label: 'this is label',
},
});
IconButton.storyName = 'icon button';
export const BaseButton = () => ({
component: BaseButtonComponent,
props: {
label: 'this is label',
},
});
BaseButton.storyName = 'base button';

74
code/examples/angular-cli/src/stories/basics/component-with-ng-content/__snapshots__/ng-content-about-parent.stories.storyshot
View File

@ -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>
`;

42
code/examples/angular-cli/src/stories/basics/component-with-ng-content/__snapshots__/ng-content-simple.stories.storyshot
View File

@ -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>
`;

13
code/examples/angular-cli/src/stories/basics/component-with-on-push/__snapshots__/on-push.stories.storyshot
View File

@ -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>
`;

25
code/examples/angular-cli/src/stories/basics/component-with-pipe/__snapshots__/custom-pipes.stories.storyshot
View File

@ -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>
`;

59
code/examples/angular-cli/src/stories/basics/component-with-provider/__snapshots__/di.component.stories.storyshot
View File

@ -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>
`;

25
code/examples/angular-cli/src/stories/basics/component-with-style/__snapshots__/styled.component.stories.storyshot
View File

@ -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>
`;

23
code/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector-ng-component-outlet.stories.storyshot
View File

@ -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>
`;

17
code/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector-ng-factory-resolver.stories.storyshot
View File

@ -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>
`;

27
code/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector.stories.storyshot
View File

@ -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>
`;

113
code/examples/angular-cli/src/stories/basics/ng-module/__snapshots__/import-module-for-root.stories.storyshot
View File

@ -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>
`;

81
code/examples/angular-cli/src/stories/basics/ng-module/__snapshots__/import-module.stories.storyshot
View File

@ -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>
`;

213
code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/__snapshots__/decorators.stories.storyshot
View File

@ -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>
`;

117
code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts
View File

@ -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>`,
};
},
];

11
code/examples/angular-cli/src/stories/core/decorators/theme-decorator/__snapshots__/decorators.stories.storyshot
View File

@ -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>
`;

18
code/examples/angular-cli/src/stories/core/decorators/theme-decorator/decorators.stories.ts
View File

@ -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,
},
});

47
code/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/in-export-default.stories.storyshot
View File

@ -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>
`;

47
code/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/in-stories.stories.storyshot
View File

@ -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>
`;

25
code/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/merge-default-and-story.stories.storyshot
View File

@ -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>
`;

34
code/examples/angular-cli/src/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot
View File

@ -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>
`;

13
code/examples/angular-cli/src/stories/core/parameters/__snapshots__/bootstrap-options.stories.storyshot
View File

@ -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>
`;

67
code/examples/angular-cli/src/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot
View File

@ -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>
`;

31
code/examples/angular-cli/src/stories/core/parameters/layout.parameters.stories.ts
View File

@ -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' };

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

@ -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>
`;

7
code/examples/angular-cli/src/stories/legacy/README.stories.mdx
View File

@ -1,7 +0,0 @@
import { Meta } from '@storybook/addon-docs';
<Meta title="Legacy / Readme" />
# Legacy examples
Example of story still supported by storybook but no longer recommended or deprecated

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

@ -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>
`;

14
code/examples/angular-cli/src/stories/legacy/component-in-story.stories.ts
View File

@ -1,14 +0,0 @@
import type { Meta, StoryFn } from '@storybook/angular';
import { Button } from '../angular-demo';
export default {
title: 'Legacy / Component in Story',
} as Meta;
export const Basic: StoryFn = (args) => ({
component: Button,
props: args,
});
Basic.args = {
text: 'Hello Button',
};

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

@ -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>
`;

21
code/examples/angular-cli/src/stories/others/ngrx/__snapshots__/ngrx-store.stories.storyshot
View File

@ -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>
`;

50
code/examples/angular-cli/src/stories/others/ngrx/ngrx-store.stories.ts
View File

@ -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>`,
});

2
code/frameworks/angular/src/client/decorateStory.ts
View File

@ -61,7 +61,7 @@ const cleanArgsDecorator: DecoratorFunction<AngularFramework> = (storyFn, contex
const argType = context.argTypes[key];
// Only keeps args with a control or an action in argTypes
if (argType.action || argType.control) {
if (argType?.action || argType?.control) {
return { ...obj, [key]: arg };
}
return obj;

5
code/frameworks/angular/template/components/button.component.ts
View File

@ -1,7 +1,8 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'storybook-button',
// Needs to be a different name to the CLI template button
selector: 'storybook-framework-button',
template: ` <button
type="button"
(click)="onClick.emit($event)"
@ -12,7 +13,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
</button>`,
styleUrls: ['./button.css'],
})
export default class ButtonComponent {
export default class FrameworkButtonComponent {
/**
* Is this the principal call to action on the page?
*/

37
code/frameworks/angular/template/components/form.component.ts Normal file
View File

@ -0,0 +1,37 @@
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'storybook-form',
template: `
<form id="interaction-test-form" (submit)="handleSubmit($event)">
<label>
Enter Value
<input type="text" data-testid="value" [value]="value" required />
</label>
<button type="submit">Submit</button>
<p *ngIf="complete">Completed!!</p>
</form>
`,
})
export default class FormComponent {
/**
* Optional success handler
*/
@Output()
onSuccess = new EventEmitter<string>();
value = '';
complete = false;
handleSubmit(event: SubmitEvent) {
event.preventDefault();
this.onSuccess.emit(this.value);
setTimeout(() => {
this.complete = true;
}, 500);
setTimeout(() => {
this.complete = false;
}, 1500);
}
}

23
code/frameworks/angular/template/components/html.component.ts Normal file
View File

@ -0,0 +1,23 @@
import { Component, Input } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'storybook-html',
template: `<div [innerHTML]="safeContent"></div>`,
})
export default class HtmlComponent {
/**
* The HTML to render
*
* @required
*/
@Input()
content = '';
// eslint-disable-next-line no-useless-constructor
constructor(private sanitizer: DomSanitizer) {}
get safeContent() {
return this.sanitizer.bypassSecurityTrustHtml(this.content);
}
}

5
code/frameworks/angular/template/components/index.js vendored
View File

@ -1,5 +1,8 @@
import globalThis from 'global';
import Button from './button.component';
import Html from './html.component';
import Pre from './pre.component';
import Form from './form.component';
globalThis.Components = { Button };
globalThis.Components = { Button, Html, Pre, Form };

29
code/frameworks/angular/template/components/pre.component.ts Normal file
View File

@ -0,0 +1,29 @@
import { Component, Input } from '@angular/core';
@Component({
selector: 'storybook-pre',
template: `<pre data-testid="pre" [ngStyle]="style">{{ finalText }}</pre>`,
})
export default class PreComponent {
/**
* Styles to apply to the component
*/
@Input()
style?: Object;
/**
* An object to render
*/
@Input()
object?: Object;
/**
* The code to render
*/
@Input()
text?: string;
get finalText() {
return this.object ? JSON.stringify(this.object, null, 2) : this.text;
}
}

4
code/frameworks/angular/template/stories/angular-mdx.stories.mdx
View File

@ -15,9 +15,9 @@ export const Button = globalThis.Components.Button;
<Canvas>
<Story name="Angular Story">
{{
template: `<storybook-button-component [label]="text" (onClick)="onClick($event)"></storybook-button-component>`,
template: `<storybook-framework-button [label]="text" (onClick)="onClick($event)"></storybook-framework-button>`,
props: {
label: 'hello button',
text: 'hello button',
onClick: () => {},
},
}}

0
code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.component.html → code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.html
View File

0
code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.component.scss → code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.scss
View File

13
code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.component.ts → code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.ts
View File

@ -45,7 +45,7 @@ export enum ButtonAccent {
styleUrls: ['./doc-button.component.scss'],
})
export class DocButtonComponent<T> {
@ViewChild('buttonRef', { static: false }) buttonRef: ElementRef;
@ViewChild('buttonRef', { static: false }) buttonRef!: ElementRef;
/** Test default value. */
@Input()
@ -72,6 +72,7 @@ export class DocButtonComponent<T> {
/** Test null default value. */
@Input()
// @ts-expect-error intentionally undefined
public anUndefinedValue;
/** Test numeric default value. */
@ -91,7 +92,7 @@ export class DocButtonComponent<T> {
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;
@Input() public someDataObject!: ISomeInterface;
/**
* The inner text of the button.
@ -99,7 +100,7 @@ export class DocButtonComponent<T> {
* @required
*/
@Input()
public label: string;
public label!: string;
/** Size of the button. */
@Input()
@ -148,7 +149,7 @@ export class DocButtonComponent<T> {
}
@HostListener('click', ['$event'])
onClickListener(event) {
onClickListener(event: Event) {
console.log('button', event.target);
this.handleClick(event);
}
@ -221,12 +222,12 @@ export class DocButtonComponent<T> {
}
@Input('showKeyAlias')
public showKey: keyof T;
public showKey!: keyof T;
@Input()
public set item(item: T[]) {
this.processedItem = item;
}
public processedItem: T[];
public processedItem!: T[];
}

6
code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.stories.ts → code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts
View File

@ -1,11 +1,11 @@
import { Args } from '@storybook/angular';
import { DocButtonComponent } from './doc-button.component';
export default {
title: 'Addons/Docs/DocButton',
component: DocButtonComponent,
};
export const Basic = (args) => ({
export const Basic = (args: Args) => ({
props: args,
});
Basic.args = { label: 'Args test', isDisabled: false };
@ -17,7 +17,7 @@ Basic.ArgTypes = {
},
};
export const WithTemplate = (args) => ({
export const WithTemplate = (args: Args) => ({
props: args,
template: '<my-button [label]="label" [appearance]="appearance"></my-button>',
});

0
code/frameworks/angular/template/stories/docgen-components/doc-directive/doc-directive.directive.ts → code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.directive.ts
View File

1
code/frameworks/angular/template/stories/docgen-components/doc-directive/doc-directive.stories.ts → code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts
View File

@ -1,7 +1,6 @@
import { DocDirective } from './doc-directive.directive';
export default {
title: 'Addons/Docs/DocDirective',
component: DocDirective,
};

0
code/frameworks/angular/template/stories/docgen-components/doc-injectable/doc-injectable.service.ts → code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.service.ts
View File

1
code/frameworks/angular/template/stories/docgen-components/doc-injectable/doc-injectable.stories.ts → code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts
View File

@ -1,7 +1,6 @@
import { DocInjectableService } from './doc-injectable.service';
export default {
title: 'Addons/Docs/DocInjectable',
component: DocInjectableService,
parameters: {
controls: { hideNoControlsWarning: true },

0
code/frameworks/angular/template/stories/docgen-components/doc-pipe/doc-pipe.pipe.ts → code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.pipe.ts
View File

1
code/frameworks/angular/template/stories/docgen-components/doc-pipe/doc-pipe.stories.ts → code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts
View File

@ -1,7 +1,6 @@
import { DocPipe } from './doc-pipe.pipe';
export default {
title: 'Addons/Docs/DocPipe',
component: DocPipe,
parameters: {
controls: { hideNoControlsWarning: true },

2
code/examples/angular-cli/src/stories/basics/README.stories.mdx → code/frameworks/angular/template/stories/basics/README.stories.mdx
View File

@ -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

2
code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts → code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts
View File

@ -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({

2
code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts → code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts
View File

@ -18,7 +18,7 @@ const NOOP = () => {};
],
})
export class CustomCvaComponent implements ControlValueAccessor {
disabled: boolean;
disabled?: boolean;
protected onChange: (value: any) => void = NOOP;

4
code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/attribute-selector.component.ts → code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selector.component.ts
View File

@ -7,9 +7,9 @@ import { Component, ComponentFactoryResolver, ElementRef } from '@angular/core';
Generated template: {{ generatedTemplate }}`,
})
export class AttributeSelectorComponent {
generatedTemplate = '';
generatedTemplate!: string;
selectors = '';
selectors!: string;
constructor(public el: ElementRef, private resolver: ComponentFactoryResolver) {
const factory = this.resolver.resolveComponentFactory(AttributeSelectorComponent);

8
code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts Normal file
View File

@ -0,0 +1,8 @@
import { AttributeSelectorComponent } from './attribute-selector.component';
export default {
// title: 'Basics / Component / With Complex Selectors',
component: AttributeSelectorComponent,
};
export const AttributeSelectors = {};

8
code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.stories.ts Normal file
View File

@ -0,0 +1,8 @@
import { ClassSelectorComponent } from './class-selector.component';
export default {
// title: 'Basics / Component / With Complex Selectors',
component: ClassSelectorComponent,
};
export const ClassSelectors = {};

4
code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/class-selector.component.ts → code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.ts
View File

@ -7,9 +7,9 @@ import { Component, ComponentFactoryResolver, ElementRef } from '@angular/core';
Generated template: {{ generatedTemplate }}`,
})
export class ClassSelectorComponent {
generatedTemplate = '';
generatedTemplate!: string;
selectors = '';
selectors!: string;
constructor(public el: ElementRef, private resolver: ComponentFactoryResolver) {
const factory = this.resolver.resolveComponentFactory(ClassSelectorComponent);

8
code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-class-selector.component.stories.ts Normal file
View File

@ -0,0 +1,8 @@
import { MultipleClassSelectorComponent } from './multiple-selector.component';
export default {
// title: 'Basics / Component / With Complex Selectors',
component: MultipleClassSelectorComponent,
};
export const MultipleClassSelectors = {};

8
code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts Normal file
View File

@ -0,0 +1,8 @@
import { MultipleSelectorComponent } from './multiple-selector.component';
export default {
// title: 'Basics / Component / With Complex Selectors',
component: MultipleSelectorComponent,
};
export const MultipleSelectors = {};

8
code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/multiple-selector.component.ts → code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.ts
View File

@ -7,9 +7,9 @@ import { Component, ComponentFactoryResolver, ElementRef } from '@angular/core';
Generated template: {{ generatedTemplate }}`,
})
export class MultipleSelectorComponent {
generatedTemplate = '';
generatedTemplate!: string;
selectors = '';
selectors!: string;
constructor(public el: ElementRef, private resolver: ComponentFactoryResolver) {
const factory = this.resolver.resolveComponentFactory(MultipleClassSelectorComponent);
@ -25,9 +25,9 @@ export class MultipleSelectorComponent {
Generated template: {{ generatedTemplate }}`,
})
export class MultipleClassSelectorComponent {
generatedTemplate = '';
generatedTemplate!: string;
selectors = '';
selectors!: string;
constructor(public el: ElementRef, private resolver: ComponentFactoryResolver) {
const factory = this.resolver.resolveComponentFactory(MultipleClassSelectorComponent);

0
code/examples/angular-cli/src/stories/basics/component-with-enums/enums.component.html → code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.html
View File

2
code/examples/angular-cli/src/stories/basics/component-with-enums/enums.component.stories.ts → code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts
View File

@ -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;

12
code/examples/angular-cli/src/stories/basics/component-with-enums/enums.component.ts → code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.ts
View File

@ -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;
}
/**

2
code/examples/angular-cli/src/stories/basics/component-with-inheritance/base-button.component.ts → code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.component.ts
View File

@ -6,5 +6,5 @@ import { Component, Input } from '@angular/core';
})
export class BaseButtonComponent {
@Input()
label: string;
label?: string;
}

12
code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.stories.ts Normal file
View File

@ -0,0 +1,12 @@
import { BaseButtonComponent } from './base-button.component';
export default {
// title: 'Basics / Component / With Inheritance',
component: BaseButtonComponent,
};
export const BaseButton = () => ({
props: {
label: 'this is label',
},
});

2
code/examples/angular-cli/src/stories/basics/component-with-inheritance/icon-button.component.ts → code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.component.ts
View File

@ -7,5 +7,5 @@ import { BaseButtonComponent } from './base-button.component';
})
export class IconButtonComponent extends BaseButtonComponent {
@Input()
icon: string;
icon?: string;
}

13
code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.stories.ts Normal file
View File

@ -0,0 +1,13 @@
import { IconButtonComponent } from './icon-button.component';
export default {
// title: 'Basics / Component / With Inheritance',
component: IconButtonComponent,
};
export const IconButton = () => ({
props: {
icon: 'this is icon',
label: 'this is label',
},
});

53
code/examples/angular-cli/src/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts → code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts
View File

@ -1,5 +1,5 @@
import { Component, Input } from '@angular/core';
import { componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
import { componentWrapperDecorator } from '@storybook/angular';
import type { Meta, StoryFn } from '@storybook/angular';
@ -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' },
@ -57,46 +59,3 @@ export const InH1: StoryFn = () => ({
});
InH1.decorators = [componentWrapperDecorator((story) => `<h1>${story}</h1>`)];
InH1.storyName = 'In <h1>';
@Component({
selector: 'sb-emoji',
template: `{{ emoji }}`,
styles: [
`
:host {
padding-right: 4px;
}
`,
],
})
class SbEmojiComponent {
@Input()
emoji = '👾';
}
export const WithComponent: StoryFn = () => ({
// Override the default component
// It is therefore necessary to manually declare the parent component with moduleMetadata
component: SbEmojiComponent,
});
WithComponent.decorators = [
moduleMetadata({
declarations: [SbButtonComponent],
}),
];
export const WithComponentAndArgs: StoryFn = (args) => {
return {
props: args,
component: SbEmojiComponent,
};
};
WithComponentAndArgs.decorators = [
moduleMetadata({
declarations: [SbButtonComponent],
}),
];
WithComponentAndArgs.argTypes = {
emoji: { control: 'text' },
};
WithComponentAndArgs.args = { emoji: '🌵' };

5
code/examples/angular-cli/src/stories/basics/component-with-ng-content/ng-content-simple.stories.ts → code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts
View File

@ -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' },

4
code/examples/angular-cli/src/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts → code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts
View File

@ -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()

4
code/examples/angular-cli/src/stories/basics/component-with-on-push/on-push-box.component.ts → code/frameworks/angular/template/stories/basics/component-with-on-push/on-push-box.component.ts
View File

@ -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
code/examples/angular-cli/src/stories/basics/component-with-on-push/on-push.stories.ts → code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts
View File

@ -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' },

2
code/examples/angular-cli/src/stories/basics/component-with-pipe/custom-pipes.stories.ts → code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts
View File

@ -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({

0
code/examples/angular-cli/src/stories/basics/component-with-pipe/custom.pipe.ts → code/frameworks/angular/template/stories/basics/component-with-pipe/custom.pipe.ts
View File

2
code/examples/angular-cli/src/stories/basics/component-with-pipe/with-pipe.component.ts → code/frameworks/angular/template/stories/basics/component-with-pipe/with-pipe.component.ts
View File

@ -6,5 +6,5 @@ import { Component, Input } from '@angular/core';
})
export class WithPipeComponent {
@Input()
field;
field: any;
}

0
code/examples/angular-cli/src/stories/basics/component-with-provider/di.component.html → code/frameworks/angular/template/stories/basics/component-with-provider/di.component.html
View File

5
code/examples/angular-cli/src/stories/basics/component-with-provider/di.component.stories.ts → code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts
View File

@ -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';

2
code/examples/angular-cli/src/stories/basics/component-with-provider/di.component.ts → code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts
View File

@ -11,7 +11,7 @@ export const TEST_TOKEN = new InjectionToken<string>('test');
})
export class DiComponent {
@Input()
title: string;
title?: string;
constructor(
protected injector: Injector,

0
code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.css → code/frameworks/angular/template/stories/basics/component-with-style/styled.component.css
View File

0
code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.html → code/frameworks/angular/template/stories/basics/component-with-style/styled.component.html
View File

0
code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.scss → code/frameworks/angular/template/stories/basics/component-with-style/styled.component.scss
View File

2
code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.stories.ts → code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts
View File

@ -1,7 +1,7 @@
import { StyledComponent } from './styled.component';
export default {
title: 'Basics / Component / With StyleUrls',
// title: 'Basics / Component / With StyleUrls',
component: StyledComponent,
};

0
code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.ts → code/frameworks/angular/template/stories/basics/component-with-style/styled.component.ts
View File

13
code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts → code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts
View File

@ -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,
})),
];

10
code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts → code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts
View File

@ -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);
}
}

0
code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector.component.ts → code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.component.ts
View File

5
code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector.stories.ts → code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts
View File

@ -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'] } },
],
},
});

0
code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chip-color.token.ts → code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip-color.token.ts
View File

0
code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chip-text.pipe.ts → code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip-text.pipe.ts
View File

2
code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chip.component.ts → code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip.component.ts
View File

@ -48,7 +48,7 @@ import { CHIP_COLOR } from './chip-color.token';
],
})
export class ChipComponent {
@Input() displayText: string;
@Input() displayText?: string;
@Output() removeClicked = new EventEmitter();

2
code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chips-group.component.ts → code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips-group.component.ts
View File

@ -38,7 +38,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
],
})
export class ChipsGroupComponent {
@Input() chips: {
@Input() chips?: {
id: number;
text: string;
}[];

0
code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chips.module.ts → code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips.module.ts
View File

2
code/examples/angular-cli/src/stories/basics/ng-module/import-module-for-root.stories.ts → code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts
View File

@ -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({

3
code/examples/angular-cli/src/stories/basics/ng-module/import-module.stories.ts → code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts
View File

@ -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
View 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>();
}

20
code/frameworks/angular/template/stories/child.component.ts
View File

@ -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>();
}

Some files were not shown because too many files have changed in this diff Show More