diff --git a/code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot b/code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot deleted file mode 100644 index 5f4b1dfb13a1..000000000000 --- a/code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot +++ /dev/null @@ -1,15 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Basics / Angular forms / ControlValueAccessor Simple input 1`] = ` - - -
- -
- - - -`; diff --git a/code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot b/code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot deleted file mode 100644 index 460e52d629cb..000000000000 --- a/code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot +++ /dev/null @@ -1,57 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Basics / Component / With Complex Selectors attribute selectors 1`] = ` - - -

- Attribute selector -

- Selector: storybook-attribute-selector[foo="bar"] -
- Generated template: <storybook-attribute-selector foo="bar"></storybook-attribute-selector> - - -`; - -exports[`Storyshots Basics / Component / With Complex Selectors class selectors 1`] = ` - - -

- Class selector -

- Selector: storybook-class-selector.foo,storybook-class-selector.bar -
- Generated template: <storybook-class-selector class="foo"></storybook-class-selector> - - -`; - -exports[`Storyshots Basics / Component / With Complex Selectors multiple class selectors 1`] = ` - - -

- Multiple selector -

- Selector: storybook-button,button[foo],[foo].button,button[baz] -
- Generated template: <storybook-button></storybook-button> - - -`; - -exports[`Storyshots Basics / Component / With Complex Selectors multiple selectors 1`] = ` - - -

- Multiple selector -

- Selector: storybook-button,button[foo],[foo].button,button[baz] -
- Generated template: <storybook-multiple-selector></storybook-multiple-selector> - - -`; diff --git a/code/examples/angular-cli/src/stories/basics/component-with-enums/__snapshots__/enums.component.stories.storyshot b/code/examples/angular-cli/src/stories/basics/component-with-enums/__snapshots__/enums.component.stories.storyshot deleted file mode 100644 index aaf435fc730a..000000000000 --- a/code/examples/angular-cli/src/stories/basics/component-with-enums/__snapshots__/enums.component.stories.storyshot +++ /dev/null @@ -1,35 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Basics / Component / With Enum Types Basic 1`] = ` - - -
-
- unionType: union a -
-
- aliasedUnionType: Type Alias 1 -
-
- enumNumeric: 0 -
-
- enumNumericInitial: 1 -
-
- enumStrings: PRIMARY -
-
- enumAlias: 0 -
-
- - -`; diff --git a/code/examples/angular-cli/src/stories/basics/component-with-inheritance/__snapshots__/inheritance.stories.storyshot b/code/examples/angular-cli/src/stories/basics/component-with-inheritance/__snapshots__/inheritance.stories.storyshot deleted file mode 100644 index 599db9b491d9..000000000000 --- a/code/examples/angular-cli/src/stories/basics/component-with-inheritance/__snapshots__/inheritance.stories.storyshot +++ /dev/null @@ -1,26 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Basics / Component / With Inheritance base button 1`] = ` - - - - - -`; - -exports[`Storyshots Basics / Component / With Inheritance icon button 1`] = ` - - - - - -`; diff --git a/code/examples/angular-cli/src/stories/basics/component-with-ng-content/__snapshots__/ng-content-about-parent.stories.storyshot b/code/examples/angular-cli/src/stories/basics/component-with-ng-content/__snapshots__/ng-content-about-parent.stories.storyshot deleted file mode 100644 index a8422882a1a4..000000000000 --- a/code/examples/angular-cli/src/stories/basics/component-with-ng-content/__snapshots__/ng-content-about-parent.stories.storyshot +++ /dev/null @@ -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`] = ` - - - - - -`; - -exports[`Storyshots Basics / Component / With ng-content / Button with different contents Empty Button 1`] = ` - - - - - -`; - -exports[`Storyshots Basics / Component / With ng-content / Button with different contents With Component 1`] = ` - - - - - -`; - -exports[`Storyshots Basics / Component / With ng-content / Button with different contents With Component And Args 1`] = ` - - - - - -`; - -exports[`Storyshots Basics / Component / With ng-content / Button with different contents With Dynamic Content And Args 1`] = ` - - - - - -`; diff --git a/code/examples/angular-cli/src/stories/basics/component-with-ng-content/__snapshots__/ng-content-simple.stories.storyshot b/code/examples/angular-cli/src/stories/basics/component-with-ng-content/__snapshots__/ng-content-simple.stories.storyshot deleted file mode 100644 index 9ff0be60731d..000000000000 --- a/code/examples/angular-cli/src/stories/basics/component-with-ng-content/__snapshots__/ng-content-simple.stories.storyshot +++ /dev/null @@ -1,42 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Basics / Component / With ng-content / Simple Default 1`] = ` - - - Content value: -
-

- This is rendered in ng-content -

-
- - -`; - -exports[`Storyshots Basics / Component / With ng-content / Simple Only Component 1`] = ` - - - Content value: -
- - -`; - -exports[`Storyshots Basics / Component / With ng-content / Simple With Dynamic Content And Args 1`] = ` - - - Content value: -
-

- Default content -

-
- - -`; diff --git a/code/examples/angular-cli/src/stories/basics/component-with-on-push/__snapshots__/on-push.stories.storyshot b/code/examples/angular-cli/src/stories/basics/component-with-on-push/__snapshots__/on-push.stories.storyshot deleted file mode 100644 index f33448f92bba..000000000000 --- a/code/examples/angular-cli/src/stories/basics/component-with-on-push/__snapshots__/on-push.stories.storyshot +++ /dev/null @@ -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`] = ` - - - Word of the day: The text - - -`; diff --git a/code/examples/angular-cli/src/stories/basics/component-with-pipe/__snapshots__/custom-pipes.stories.storyshot b/code/examples/angular-cli/src/stories/basics/component-with-pipe/__snapshots__/custom-pipes.stories.storyshot deleted file mode 100644 index 086157037ecb..000000000000 --- a/code/examples/angular-cli/src/stories/basics/component-with-pipe/__snapshots__/custom-pipes.stories.storyshot +++ /dev/null @@ -1,25 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Basics / Component / With Pipes Simple 1`] = ` - - -

- CustomPipe: foobar -

- - -`; - -exports[`Storyshots Basics / Component / With Pipes With args 1`] = ` - - -

- CustomPipe: Foo Bar -

- - -`; diff --git a/code/examples/angular-cli/src/stories/basics/component-with-provider/__snapshots__/di.component.stories.storyshot b/code/examples/angular-cli/src/stories/basics/component-with-provider/__snapshots__/di.component.stories.storyshot deleted file mode 100644 index d9fb54b3c1b2..000000000000 --- a/code/examples/angular-cli/src/stories/basics/component-with-provider/__snapshots__/di.component.stories.storyshot +++ /dev/null @@ -1,59 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Basics / Component / With Provider inputs and inject dependencies 1`] = ` - - -
-
- All dependencies are defined: true -
-
- Title: Component dependencies -
-
- Injector: function NodeInjector(_tNode, _lView) { - this._tNode = _tNode; - this._lView = _lView; - } -
-
- ElementRef: {"nativeElement":{"__ngContext__":"[Array(33)]","_constructor-name_":"HTMLElement"}} -
-
- TestToken: 123 -
-
- - -`; - -exports[`Storyshots Basics / Component / With Provider inputs and inject dependencies with args 1`] = ` - - -
-
- All dependencies are defined: true -
-
- Title: Component dependencies -
-
- Injector: function NodeInjector(_tNode, _lView) { - this._tNode = _tNode; - this._lView = _lView; - } -
-
- ElementRef: {"nativeElement":{"__ngContext__":"[Array(33)]","_constructor-name_":"HTMLElement"}} -
-
- TestToken: 123 -
-
- - -`; diff --git a/code/examples/angular-cli/src/stories/basics/component-with-style/__snapshots__/styled.component.stories.storyshot b/code/examples/angular-cli/src/stories/basics/component-with-style/__snapshots__/styled.component.stories.storyshot deleted file mode 100644 index 67afa3fec1e5..000000000000 --- a/code/examples/angular-cli/src/stories/basics/component-with-style/__snapshots__/styled.component.stories.storyshot +++ /dev/null @@ -1,25 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Basics / Component / With StyleUrls Component with styles 1`] = ` - - -
-

- Styled with scoped CSS -

-

- Styled with scoped SCSS -

-

- Styled with global CSS -

-
- - -`; diff --git a/code/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector-ng-component-outlet.stories.storyshot b/code/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector-ng-component-outlet.stories.storyshot deleted file mode 100644 index 0d6bcc532750..000000000000 --- a/code/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector-ng-component-outlet.stories.storyshot +++ /dev/null @@ -1,23 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Basics / Component / without selector / Custom wrapper *NgComponentOutlet Custom wrapper *NgComponentOutlet 1`] = ` - - - - My name in color : -
- Dixie Normous -
- Ng-content : Inspired by - https://angular.io/api/common/NgComponentOutlet - - - - -`; diff --git a/code/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector-ng-factory-resolver.stories.storyshot b/code/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector-ng-factory-resolver.stories.storyshot deleted file mode 100644 index 9bd911768d2c..000000000000 --- a/code/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector-ng-factory-resolver.stories.storyshot +++ /dev/null @@ -1,17 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Basics / Component / without selector / Custom wrapper ComponentFactoryResolver Custom wrapper ComponentFactoryResolver 1`] = ` - - - My name in color : -
- Dixie Normous -
- - -`; diff --git a/code/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector.stories.storyshot b/code/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector.stories.storyshot deleted file mode 100644 index cc9d114e8379..000000000000 --- a/code/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector.stories.storyshot +++ /dev/null @@ -1,27 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Basics / Component / without selector Simple Component 1`] = ` - - - My name in color : -
- Joe Bar -
- - -`; - -exports[`Storyshots Basics / Component / without selector With Injection Token And Args 1`] = ` - - - My name in color : -
- Dixie Normous -
- - -`; diff --git a/code/examples/angular-cli/src/stories/basics/ng-module/__snapshots__/import-module-for-root.stories.storyshot b/code/examples/angular-cli/src/stories/basics/ng-module/__snapshots__/import-module-for-root.stories.storyshot deleted file mode 100644 index f5c1fe6d1c73..000000000000 --- a/code/examples/angular-cli/src/stories/basics/ng-module/__snapshots__/import-module-for-root.stories.storyshot +++ /dev/null @@ -1,113 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Basics / NgModule / forRoot() pattern Chips group 1`] = ` - - - - - Chíp 1 - -
- - ✕ - -
- - - - Chíp 2 - -
- - ✕ - -
- - -
- Remove All -
- - - -`; - -exports[`Storyshots Basics / NgModule / forRoot() pattern Chips group with overridden provider 1`] = ` - - - - - Chíp 1 - -
- - ✕ - -
- - - - Chíp 2 - -
- - ✕ - -
- - -
- Remove All -
- - - -`; diff --git a/code/examples/angular-cli/src/stories/basics/ng-module/__snapshots__/import-module.stories.storyshot b/code/examples/angular-cli/src/stories/basics/ng-module/__snapshots__/import-module.stories.storyshot deleted file mode 100644 index b6daa0d1f2e1..000000000000 --- a/code/examples/angular-cli/src/stories/basics/ng-module/__snapshots__/import-module.stories.storyshot +++ /dev/null @@ -1,81 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Basics / NgModule / Module with multiple component Chip 1`] = ` - - - - Chíp - -
- - ✕ - -
- - -`; - -exports[`Storyshots Basics / NgModule / Module with multiple component Chips Group 1`] = ` - - - - - Chíp 1 - -
- - ✕ - -
- - - - Chíp 2 - -
- - ✕ - -
- - -
- Remove All -
- - - -`; diff --git a/code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/__snapshots__/decorators.stories.storyshot b/code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/__snapshots__/decorators.stories.storyshot deleted file mode 100644 index bdee6db3222c..000000000000 --- a/code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/__snapshots__/decorators.stories.storyshot +++ /dev/null @@ -1,213 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Core / Decorators / ComponentWrapperDecorator Angular Legacy Rendering 1`] = ` - - Grandparent
- Custom Decorator -
- Child Template -
-
- -`; - -exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component 1`] = ` - - Grandparent
- - Child -
- Input text: Child text -
- Output : - -
- Private text: Child private text -
- - -
- -`; - -exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component Wrapper Decorator 1`] = ` - - Grandparent
- - Parent -
- Input text: -
- Output : - -
-
- - Child -
- Input text: Child text -
- Output : - -
- Private text: Child private text -
- - -
- -
- -`; - -exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component Wrapper Decorator And Args 1`] = ` - - Grandparent
- - Parent -
- Input text: -
- Output : - -
-
- - Child -
- Input text: Child text -
- Output : - -
- Private text: Child private text -
- - -
- -
- -`; - -exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component Wrapper Decorator And Props 1`] = ` - - Grandparent
- - Parent -
- Input text: Parent text -
- Output : - -
-
- - Child -
- Input text: Child text -
- Output : - -
- Private text: Child private text -
- - -
- -
- -`; - -exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Custom Decorator 1`] = ` - - Grandparent
- Custom Decorator -
- Child Template -
-
- -`; - -exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Legacy Component 1`] = ` - - Grandparent
- - Child -
- Input text: Child text -
- Output : - -
- Private text: Child private text -
- - -
- -`; - -exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Template 1`] = ` - - Grandparent
- Child Template -
- -`; diff --git a/code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts b/code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts deleted file mode 100644 index 1f4b61b9bec9..000000000000 --- a/code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts +++ /dev/null @@ -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
${story}
` - ), - ], - 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
${story.template}
`, - }; - }, -]; - -export const AngularLegacyRendering = (args) => ({ - template: `Child Template`, - props: { - ...args, - }, -}); -AngularLegacyRendering.parameters = { angularLegacyRendering: true }; -AngularLegacyRendering.decorators = [ - (storyFunc) => { - const story = storyFunc(); - - return { - ...story, - template: `Custom Decorator
${story.template}
`, - }; - }, -]; diff --git a/code/examples/angular-cli/src/stories/core/decorators/theme-decorator/__snapshots__/decorators.stories.storyshot b/code/examples/angular-cli/src/stories/core/decorators/theme-decorator/__snapshots__/decorators.stories.storyshot deleted file mode 100644 index 26b6592642cc..000000000000 --- a/code/examples/angular-cli/src/stories/core/decorators/theme-decorator/__snapshots__/decorators.stories.storyshot +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Core / Decorators / Theme Decorators Base 1`] = ` - -
- Change theme with the brush in toolbar -
- -`; diff --git a/code/examples/angular-cli/src/stories/core/decorators/theme-decorator/decorators.stories.ts b/code/examples/angular-cli/src/stories/core/decorators/theme-decorator/decorators.stories.ts deleted file mode 100644 index c3890ea87095..000000000000 --- a/code/examples/angular-cli/src/stories/core/decorators/theme-decorator/decorators.stories.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { componentWrapperDecorator, Meta } from '@storybook/angular'; - -export default { - title: 'Core / Decorators / Theme Decorators', - decorators: [ - componentWrapperDecorator( - (story) => `
${story}
`, - ({ globals }) => ({ myTheme: `${globals.theme}-theme` }) - ), - ], -} as Meta; - -export const Base = (args) => ({ - template: 'Change theme with the brush in toolbar', - props: { - ...args, - }, -}); diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/in-export-default.stories.storyshot b/code/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/in-export-default.stories.storyshot deleted file mode 100644 index bbc4164fcb97..000000000000 --- a/code/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/in-export-default.stories.storyshot +++ /dev/null @@ -1,47 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Core / ModuleMetadata / In export default with decorator Story 1 1`] = ` - - -

- Prop Name -

-

- Items: -

-
    -
  • - Joe -
    • -
  • - Jane -
    • - -
- - -`; - -exports[`Storyshots Core / ModuleMetadata / In export default with decorator Story 2 1`] = ` - - -

- Provider Name -

-

- Items: -

-
    -
  • - Joe -
    • -
  • - Jane -
    • - -
- - -`; diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/in-stories.stories.storyshot b/code/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/in-stories.stories.storyshot deleted file mode 100644 index dd3a8cbb8707..000000000000 --- a/code/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/in-stories.stories.storyshot +++ /dev/null @@ -1,47 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Core / ModuleMetadata / In stories Individual 1 1`] = ` - - -

- Prop Name -

-

- Items: -

-
    -
  • - Joe -
    • -
  • - Jane -
    • - -
- - -`; - -exports[`Storyshots Core / ModuleMetadata / In stories Individual 2 1`] = ` - - -

- Provider Name -

-

- Items: -

-
    -
  • - Jim -
    • -
  • - Jill -
    • - -
- - -`; diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/merge-default-and-story.stories.storyshot b/code/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/merge-default-and-story.stories.storyshot deleted file mode 100644 index 7c2c8fb716c5..000000000000 --- a/code/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/merge-default-and-story.stories.storyshot +++ /dev/null @@ -1,25 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Core / ModuleMetadata / Merge default and story Merge with default ModuleMetadata 1`] = ` - - -

- CustomPipe: Prop Name -

-

- Items: -

-
    -
  • - Joe -
    • -
  • - Jane -
    • - -
- - -`; diff --git a/code/examples/angular-cli/src/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot b/code/examples/angular-cli/src/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot deleted file mode 100644 index 9798cec48521..000000000000 --- a/code/examples/angular-cli/src/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot +++ /dev/null @@ -1,34 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Core / Parameters / All parameters All parameters passed to story 1`] = ` - - - - - -`; diff --git a/code/examples/angular-cli/src/stories/core/parameters/__snapshots__/bootstrap-options.stories.storyshot b/code/examples/angular-cli/src/stories/core/parameters/__snapshots__/bootstrap-options.stories.storyshot deleted file mode 100644 index 0930ead62cd4..000000000000 --- a/code/examples/angular-cli/src/stories/core/parameters/__snapshots__/bootstrap-options.stories.storyshot +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Core / Parameters / With Bootstrap Options With Preserve Whitespaces 1`] = ` - - -
-

- Some content -

-
- - -`; diff --git a/code/examples/angular-cli/src/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot b/code/examples/angular-cli/src/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot deleted file mode 100644 index dff97a49d792..000000000000 --- a/code/examples/angular-cli/src/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot +++ /dev/null @@ -1,67 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Core / Parameters / Layout Centered 1`] = ` - - - - - -`; - -exports[`Storyshots Core / Parameters / Layout Default 1`] = ` - - - - - -`; - -exports[`Storyshots Core / Parameters / Layout Fullscreen 1`] = ` - -
- - - - -
- -`; - -exports[`Storyshots Core / Parameters / Layout None 1`] = ` - - - - - -`; - -exports[`Storyshots Core / Parameters / Layout Padded 1`] = ` - - - - - -`; diff --git a/code/examples/angular-cli/src/stories/core/parameters/layout.parameters.stories.ts b/code/examples/angular-cli/src/stories/core/parameters/layout.parameters.stories.ts deleted file mode 100644 index 4bdc282a8167..000000000000 --- a/code/examples/angular-cli/src/stories/core/parameters/layout.parameters.stories.ts +++ /dev/null @@ -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: `
`, -}); -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' }; diff --git a/code/examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot b/code/examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot deleted file mode 100644 index ca04c343df5d..000000000000 --- a/code/examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot +++ /dev/null @@ -1,27 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Core / Story host styles With Args 1`] = ` - - - - - -`; - -exports[`Storyshots Core / Story host styles With story template 1`] = ` - - - - - -`; diff --git a/code/examples/angular-cli/src/stories/legacy/__snapshots__/component-in-story.stories.storyshot b/code/examples/angular-cli/src/stories/legacy/__snapshots__/component-in-story.stories.storyshot deleted file mode 100644 index e04f37811e12..000000000000 --- a/code/examples/angular-cli/src/stories/legacy/__snapshots__/component-in-story.stories.storyshot +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Legacy / Component in Story Basic 1`] = ` - - - - - -`; diff --git a/code/examples/angular-cli/src/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot b/code/examples/angular-cli/src/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot deleted file mode 100644 index 71e6830d78c9..000000000000 --- a/code/examples/angular-cli/src/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Others / Issues / 12009 unknown component Basic 1`] = ` - - - - - -`; diff --git a/code/examples/angular-cli/src/stories/others/ngrx/__snapshots__/ngrx-store.stories.storyshot b/code/examples/angular-cli/src/stories/others/ngrx/__snapshots__/ngrx-store.stories.storyshot deleted file mode 100644 index 2d1d3d8fbcac..000000000000 --- a/code/examples/angular-cli/src/stories/others/ngrx/__snapshots__/ngrx-store.stories.storyshot +++ /dev/null @@ -1,21 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Others / NgRx / Store With Component 1`] = ` - - -
- Store is injected -
- - -`; - -exports[`Storyshots Others / NgRx / Store With Template 1`] = ` - - -
- Store is injected -
- - -`; diff --git a/code/examples/angular-cli/src/stories/others/ngrx/ngrx-store.stories.ts b/code/examples/angular-cli/src/stories/others/ngrx/ngrx-store.stories.ts deleted file mode 100644 index ba24cf01b114..000000000000 --- a/code/examples/angular-cli/src/stories/others/ngrx/ngrx-store.stories.ts +++ /dev/null @@ -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: '
{{this.getStoreState()}}
', -}) -class WithStoreComponent { - private store: Store; - - constructor(store: Store) { - 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: ``, -}); diff --git a/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.html b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.html new file mode 100644 index 000000000000..7af61d6f344d --- /dev/null +++ b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.html @@ -0,0 +1,7 @@ + diff --git a/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.scss b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.scss new file mode 100644 index 000000000000..52c3e2bf0e20 --- /dev/null +++ b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.scss @@ -0,0 +1,3 @@ +.btn-primary { + background-color: #ff9899; +} diff --git a/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.ts b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.ts new file mode 100644 index 000000000000..51d8ba0c8d29 --- /dev/null +++ b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.ts @@ -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 aaa + */ +@Component({ + selector: 'my-button', + templateUrl: './doc-button.component.html', + styleUrls: ['./doc-button.component.scss'], +}) +export class DocButtonComponent { + @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(); + + /** + * 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[]; +} diff --git a/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts new file mode 100644 index 000000000000..d23f3896359f --- /dev/null +++ b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts @@ -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: '', +}); +WithTemplate.args = { label: 'Template test', appearance: 'primary' }; diff --git a/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.directive.ts b/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.directive.ts new file mode 100644 index 000000000000..bcb039c9d9f1 --- /dev/null +++ b/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.directive.ts @@ -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'; + } + } +} diff --git a/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts new file mode 100644 index 000000000000..b734b93bf40d --- /dev/null +++ b/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts @@ -0,0 +1,14 @@ +import { DocDirective } from './doc-directive.directive'; + +export default { + component: DocDirective, +}; + +const modules = { + declarations: [DocDirective], +}; + +export const Basic = () => ({ + moduleMetadata: modules, + template: '

DocDirective

', +}); diff --git a/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.service.ts b/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.service.ts new file mode 100644 index 000000000000..b6ad136fec33 --- /dev/null +++ b/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.service.ts @@ -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 []; + } +} diff --git a/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts new file mode 100644 index 000000000000..d662a3de255f --- /dev/null +++ b/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts @@ -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: '

DocInjectable

', +}); diff --git a/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.pipe.ts b/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.pipe.ts new file mode 100644 index 000000000000..6b7aca418a37 --- /dev/null +++ b/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.pipe.ts @@ -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(); + } +} diff --git a/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts new file mode 100644 index 000000000000..ba6f0f282f63 --- /dev/null +++ b/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts @@ -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: `

{{ 'DocPipe' | docPipe }}

`, +}); diff --git a/code/examples/angular-cli/src/stories/basics/README.stories.mdx b/code/frameworks/angular/template/stories/basics/README.stories.mdx similarity index 72% rename from code/examples/angular-cli/src/stories/basics/README.stories.mdx rename to code/frameworks/angular/template/stories/basics/README.stories.mdx index 3b97cc376bcb..4af25e032e7b 100644 --- a/code/examples/angular-cli/src/stories/basics/README.stories.mdx +++ b/code/frameworks/angular/template/stories/basics/README.stories.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs'; - + # Examples for Angular features diff --git a/code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts similarity index 90% rename from code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts rename to code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts index c23f4f49f1b0..83adcf4def85 100644 --- a/code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts +++ b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts @@ -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({ diff --git a/code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts similarity index 98% rename from code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts rename to code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts index 3806d30ac5e8..ee2209c940fc 100644 --- a/code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts +++ b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts @@ -18,7 +18,7 @@ const NOOP = () => {}; ], }) export class CustomCvaComponent implements ControlValueAccessor { - disabled: boolean; + disabled?: boolean; protected onChange: (value: any) => void = NOOP; diff --git a/code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/attribute-selector.component.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selector.component.ts similarity index 100% rename from code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/attribute-selector.component.ts rename to code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selector.component.ts diff --git a/code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/class-selector.component.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.ts similarity index 100% rename from code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/class-selector.component.ts rename to code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.ts diff --git a/code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts similarity index 89% rename from code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts rename to code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts index c898a0511409..fdab41391c32 100644 --- a/code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts @@ -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 = () => ({ diff --git a/code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/multiple-selector.component.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.ts similarity index 100% rename from code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/multiple-selector.component.ts rename to code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.ts diff --git a/code/examples/angular-cli/src/stories/basics/component-with-enums/enums.component.html b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.html similarity index 100% rename from code/examples/angular-cli/src/stories/basics/component-with-enums/enums.component.html rename to code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.html diff --git a/code/examples/angular-cli/src/stories/basics/component-with-enums/enums.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts similarity index 90% rename from code/examples/angular-cli/src/stories/basics/component-with-enums/enums.component.stories.ts rename to code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts index 0a5774b3a525..2f4696dd65ef 100644 --- a/code/examples/angular-cli/src/stories/basics/component-with-enums/enums.component.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts @@ -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; diff --git a/code/examples/angular-cli/src/stories/basics/component-with-enums/enums.component.ts b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.ts similarity index 76% rename from code/examples/angular-cli/src/stories/basics/component-with-enums/enums.component.ts rename to code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.ts index 48e781942386..822aeaff17e1 100644 --- a/code/examples/angular-cli/src/stories/basics/component-with-enums/enums.component.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.ts @@ -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; } /** diff --git a/code/examples/angular-cli/src/stories/basics/component-with-inheritance/base-button.component.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.component.ts similarity index 91% rename from code/examples/angular-cli/src/stories/basics/component-with-inheritance/base-button.component.ts rename to code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.component.ts index 6afc2f20cce8..0cd694506d50 100644 --- a/code/examples/angular-cli/src/stories/basics/component-with-inheritance/base-button.component.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.component.ts @@ -6,5 +6,5 @@ import { Component, Input } from '@angular/core'; }) export class BaseButtonComponent { @Input() - label: string; + label?: string; } diff --git a/code/examples/angular-cli/src/stories/basics/component-with-inheritance/icon-button.component.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.component.ts similarity index 94% rename from code/examples/angular-cli/src/stories/basics/component-with-inheritance/icon-button.component.ts rename to code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.component.ts index 82ff17cf9e96..3994a3de2a97 100644 --- a/code/examples/angular-cli/src/stories/basics/component-with-inheritance/icon-button.component.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.component.ts @@ -7,5 +7,5 @@ import { BaseButtonComponent } from './base-button.component'; }) export class IconButtonComponent extends BaseButtonComponent { @Input() - icon: string; + icon?: string; } diff --git a/code/examples/angular-cli/src/stories/basics/component-with-inheritance/inheritance.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/inheritance.stories.ts similarity index 84% rename from code/examples/angular-cli/src/stories/basics/component-with-inheritance/inheritance.stories.ts rename to code/frameworks/angular/template/stories/basics/component-with-inheritance/inheritance.stories.ts index bf1e6a05082e..90e05e739105 100644 --- a/code/examples/angular-cli/src/stories/basics/component-with-inheritance/inheritance.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-inheritance/inheritance.stories.ts @@ -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 = () => ({ diff --git a/code/examples/angular-cli/src/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts similarity index 90% rename from code/examples/angular-cli/src/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts rename to code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts index 6978b39c44dc..e24e128d7b25 100644 --- a/code/examples/angular-cli/src/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts @@ -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) => `${story}`, - ({ 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' }, diff --git a/code/examples/angular-cli/src/stories/basics/component-with-ng-content/ng-content-simple.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts similarity index 79% rename from code/examples/angular-cli/src/stories/basics/component-with-ng-content/ng-content-simple.stories.ts rename to code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts index ee684e74c191..4a6ccdd5d16a 100644 --- a/code/examples/angular-cli/src/stories/basics/component-with-ng-content/ng-content-simple.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts @@ -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: `

${args.content}

`, + // eslint-disable-next-line dot-notation + template: `

${args['content']}

`, }); WithDynamicContentAndArgs.argTypes = { content: { control: 'text' }, diff --git a/code/examples/angular-cli/src/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts similarity index 93% rename from code/examples/angular-cli/src/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts rename to code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts index 6e12aae1c444..1e5a1f39ef7b 100644 --- a/code/examples/angular-cli/src/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts @@ -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() diff --git a/code/examples/angular-cli/src/stories/basics/component-with-on-push/on-push-box.component.ts b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push-box.component.ts similarity index 81% rename from code/examples/angular-cli/src/stories/basics/component-with-on-push/on-push-box.component.ts rename to code/frameworks/angular/template/stories/basics/component-with-on-push/on-push-box.component.ts index e35ada4b1c5b..b6bf293f1b0e 100644 --- a/code/examples/angular-cli/src/stories/basics/component-with-on-push/on-push-box.component.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push-box.component.ts @@ -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; } diff --git a/code/examples/angular-cli/src/stories/basics/component-with-on-push/on-push.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts similarity index 90% rename from code/examples/angular-cli/src/stories/basics/component-with-on-push/on-push.stories.ts rename to code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts index b39e3adb75c0..6ad452797bc2 100644 --- a/code/examples/angular-cli/src/stories/basics/component-with-on-push/on-push.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts @@ -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' }, diff --git a/code/examples/angular-cli/src/stories/basics/component-with-pipe/custom-pipes.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts similarity index 92% rename from code/examples/angular-cli/src/stories/basics/component-with-pipe/custom-pipes.stories.ts rename to code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts index 95602e0d7800..cb15d4482dc1 100644 --- a/code/examples/angular-cli/src/stories/basics/component-with-pipe/custom-pipes.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts @@ -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({ diff --git a/code/examples/angular-cli/src/stories/basics/component-with-pipe/custom.pipe.ts b/code/frameworks/angular/template/stories/basics/component-with-pipe/custom.pipe.ts similarity index 100% rename from code/examples/angular-cli/src/stories/basics/component-with-pipe/custom.pipe.ts rename to code/frameworks/angular/template/stories/basics/component-with-pipe/custom.pipe.ts diff --git a/code/examples/angular-cli/src/stories/basics/component-with-pipe/with-pipe.component.ts b/code/frameworks/angular/template/stories/basics/component-with-pipe/with-pipe.component.ts similarity index 93% rename from code/examples/angular-cli/src/stories/basics/component-with-pipe/with-pipe.component.ts rename to code/frameworks/angular/template/stories/basics/component-with-pipe/with-pipe.component.ts index 0ea676d121d6..4582170ecf73 100644 --- a/code/examples/angular-cli/src/stories/basics/component-with-pipe/with-pipe.component.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-pipe/with-pipe.component.ts @@ -6,5 +6,5 @@ import { Component, Input } from '@angular/core'; }) export class WithPipeComponent { @Input() - field; + field: any; } diff --git a/code/examples/angular-cli/src/stories/basics/component-with-provider/di.component.html b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.html similarity index 100% rename from code/examples/angular-cli/src/stories/basics/component-with-provider/di.component.html rename to code/frameworks/angular/template/stories/basics/component-with-provider/di.component.html diff --git a/code/examples/angular-cli/src/stories/basics/component-with-provider/di.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts similarity index 76% rename from code/examples/angular-cli/src/stories/basics/component-with-provider/di.component.stories.ts rename to code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts index e0ae1cfb912e..0478c7da5833 100644 --- a/code/examples/angular-cli/src/stories/basics/component-with-provider/di.component.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts @@ -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'; diff --git a/code/examples/angular-cli/src/stories/basics/component-with-provider/di.component.ts b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts similarity index 97% rename from code/examples/angular-cli/src/stories/basics/component-with-provider/di.component.ts rename to code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts index fbca49cbc42a..a91b4524000f 100644 --- a/code/examples/angular-cli/src/stories/basics/component-with-provider/di.component.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts @@ -11,7 +11,7 @@ export const TEST_TOKEN = new InjectionToken('test'); }) export class DiComponent { @Input() - title: string; + title?: string; constructor( protected injector: Injector, diff --git a/code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.css b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.css similarity index 100% rename from code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.css rename to code/frameworks/angular/template/stories/basics/component-with-style/styled.component.css diff --git a/code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.html b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.html similarity index 100% rename from code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.html rename to code/frameworks/angular/template/stories/basics/component-with-style/styled.component.html diff --git a/code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.scss b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.scss similarity index 100% rename from code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.scss rename to code/frameworks/angular/template/stories/basics/component-with-style/styled.component.scss diff --git a/code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts similarity index 80% rename from code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.stories.ts rename to code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts index c986f00bec88..0818ff28cc6f 100644 --- a/code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts @@ -1,7 +1,7 @@ import { StyledComponent } from './styled.component'; export default { - title: 'Basics / Component / With StyleUrls', + // title: 'Basics / Component / With StyleUrls', component: StyledComponent, }; diff --git a/code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.ts b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.ts similarity index 100% rename from code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.ts rename to code/frameworks/angular/template/stories/basics/component-with-style/styled.component.ts diff --git a/code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts similarity index 89% rename from code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts rename to code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts index b082edf4f23c..d6c83fd28e1b 100644 --- a/code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts @@ -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; + componentOutlet?: Type; @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, })), ]; diff --git a/code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts similarity index 89% rename from code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts rename to code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts index bea49c9a82d1..682b4f0254e9 100644 --- a/code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts @@ -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; + componentOutlet?: Type; @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); } } diff --git a/code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector.component.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.component.ts similarity index 100% rename from code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector.component.ts rename to code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.component.ts diff --git a/code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector.stories.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts similarity index 81% rename from code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector.stories.ts rename to code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts index d0660093f45d..e74c76dde1e7 100644 --- a/code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts @@ -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'] } }, ], }, }); diff --git a/code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chip-color.token.ts b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip-color.token.ts similarity index 100% rename from code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chip-color.token.ts rename to code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip-color.token.ts diff --git a/code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chip-text.pipe.ts b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip-text.pipe.ts similarity index 100% rename from code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chip-text.pipe.ts rename to code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip-text.pipe.ts diff --git a/code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chip.component.ts b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip.component.ts similarity index 97% rename from code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chip.component.ts rename to code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip.component.ts index 18ae3440a582..249adb2598ed 100644 --- a/code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chip.component.ts +++ b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip.component.ts @@ -48,7 +48,7 @@ import { CHIP_COLOR } from './chip-color.token'; ], }) export class ChipComponent { - @Input() displayText: string; + @Input() displayText?: string; @Output() removeClicked = new EventEmitter(); diff --git a/code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chips-group.component.ts b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips-group.component.ts similarity index 98% rename from code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chips-group.component.ts rename to code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips-group.component.ts index 8969e188e90c..787596400fb9 100644 --- a/code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chips-group.component.ts +++ b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips-group.component.ts @@ -38,7 +38,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core'; ], }) export class ChipsGroupComponent { - @Input() chips: { + @Input() chips?: { id: number; text: string; }[]; diff --git a/code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chips.module.ts b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips.module.ts similarity index 100% rename from code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chips.module.ts rename to code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips.module.ts diff --git a/code/examples/angular-cli/src/stories/basics/ng-module/import-module-for-root.stories.ts b/code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts similarity index 95% rename from code/examples/angular-cli/src/stories/basics/ng-module/import-module-for-root.stories.ts rename to code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts index 835d295059d3..3b8de245912d 100644 --- a/code/examples/angular-cli/src/stories/basics/ng-module/import-module-for-root.stories.ts +++ b/code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts @@ -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({ diff --git a/code/examples/angular-cli/src/stories/basics/ng-module/import-module.stories.ts b/code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts similarity index 90% rename from code/examples/angular-cli/src/stories/basics/ng-module/import-module.stories.ts rename to code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts index 3de0e32eb5b2..d183ea4726ec 100644 --- a/code/examples/angular-cli/src/stories/basics/ng-module/import-module.stories.ts +++ b/code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts @@ -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], diff --git a/code/frameworks/angular/template/stories/button.component.ts b/code/frameworks/angular/template/stories/button.component.ts new file mode 100644 index 000000000000..da804e507b7d --- /dev/null +++ b/code/frameworks/angular/template/stories/button.component.ts @@ -0,0 +1,26 @@ +import { Component, Input, Output, EventEmitter } from '@angular/core'; + +@Component({ + selector: 'storybook-button-component', + template: ` `, + 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(); +} diff --git a/code/frameworks/angular/template/stories/child.component.ts b/code/frameworks/angular/template/stories/child.component.ts deleted file mode 100644 index 4666ec952ad1..000000000000 --- a/code/frameworks/angular/template/stories/child.component.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { Component, Input, Output, EventEmitter } from '@angular/core'; - -@Component({ - selector: 'child-component', - template: ` - Child
- Input text: {{ childText }}
- Output :
- Private text: {{ childPrivateText }}
- `, -}) -export default class ChildComponent { - @Input() - childText = ''; - - childPrivateText = ''; - - @Output() - onClickChild = new EventEmitter(); -} diff --git a/code/examples/angular-cli/src/stories/core/README.stories.mdx b/code/frameworks/angular/template/stories/core/README.stories.mdx similarity index 74% rename from code/examples/angular-cli/src/stories/core/README.stories.mdx rename to code/frameworks/angular/template/stories/core/README.stories.mdx index 8313b10a94f6..15dbdc282625 100644 --- a/code/examples/angular-cli/src/stories/core/README.stories.mdx +++ b/code/frameworks/angular/template/stories/core/README.stories.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs'; - + # Examples for Storybook native features diff --git a/code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/child.component.ts b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/child.component.ts similarity index 100% rename from code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/child.component.ts rename to code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/child.component.ts diff --git a/code/frameworks/angular/template/stories/decorators.stories.ts b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts similarity index 97% rename from code/frameworks/angular/template/stories/decorators.stories.ts rename to code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts index 14cd21b924a6..12ae88e9a195 100644 --- a/code/frameworks/angular/template/stories/decorators.stories.ts +++ b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts @@ -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( diff --git a/code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/parent.component.ts b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/parent.component.ts similarity index 100% rename from code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/parent.component.ts rename to code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/parent.component.ts diff --git a/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts b/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts new file mode 100644 index 000000000000..ee8e3ad31d35 --- /dev/null +++ b/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts @@ -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) => `
${story}
`, + // eslint-disable-next-line dot-notation + ({ globals }) => ({ myTheme: `${globals['theme']}-theme` }) + ), + ], +} as Meta; diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/angular-src/custom.pipe.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/custom.pipe.ts similarity index 100% rename from code/examples/angular-cli/src/stories/core/moduleMetadata/angular-src/custom.pipe.ts rename to code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/custom.pipe.ts diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/angular-src/dummy.service.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/dummy.service.ts similarity index 100% rename from code/examples/angular-cli/src/stories/core/moduleMetadata/angular-src/dummy.service.ts rename to code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/dummy.service.ts diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/angular-src/service.component.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/service.component.ts similarity index 85% rename from code/examples/angular-cli/src/stories/core/moduleMetadata/angular-src/service.component.ts rename to code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/service.component.ts index 2d84bac39628..c0513fd344b6 100644 --- a/code/examples/angular-cli/src/stories/core/moduleMetadata/angular-src/service.component.ts +++ b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/service.component.ts @@ -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; } } diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/angular-src/token.component.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/token.component.ts similarity index 100% rename from code/examples/angular-cli/src/stories/core/moduleMetadata/angular-src/token.component.ts rename to code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/token.component.ts diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/in-export-default.stories.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/in-export-default.stories.ts similarity index 90% rename from code/examples/angular-cli/src/stories/core/moduleMetadata/in-export-default.stories.ts rename to code/frameworks/angular/template/stories/core/moduleMetadata/in-export-default.stories.ts index ad05fd12f07a..8d4d6f174e15 100644 --- a/code/examples/angular-cli/src/stories/core/moduleMetadata/in-export-default.stories.ts +++ b/code/frameworks/angular/template/stories/core/moduleMetadata/in-export-default.stories.ts @@ -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: ``, + props: { + name: 'Prop Name', + }, +}); + +Story1.storyName = 'Story 1'; + +export const Story2: StoryFn = () => ({ + template: ``, +}); + +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: ``, - props: { - name: 'Prop Name', - }, -}); - -Story1.storyName = 'Story 1'; - -export const Story2: StoryFn = () => ({ - template: ``, -}); - -Story2.storyName = 'Story 2'; diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/in-stories.stories.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/in-stories.stories.ts similarity index 93% rename from code/examples/angular-cli/src/stories/core/moduleMetadata/in-stories.stories.ts rename to code/frameworks/angular/template/stories/core/moduleMetadata/in-stories.stories.ts index 22bb6a8c4ba4..53a21feff3cf 100644 --- a/code/examples/angular-cli/src/stories/core/moduleMetadata/in-stories.stories.ts +++ b/code/frameworks/angular/template/stories/core/moduleMetadata/in-stories.stories.ts @@ -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: ``, props: { @@ -43,3 +39,8 @@ export const Individual2: StoryFn = () => ({ }); Individual2.storyName = 'Individual 2'; + +export default { + // title: 'Core / ModuleMetadata / In stories', + component: Individual1, +} as Meta; diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/merge-default-and-story.stories.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/merge-default-and-story.stories.ts similarity index 89% rename from code/examples/angular-cli/src/stories/core/moduleMetadata/merge-default-and-story.stories.ts rename to code/frameworks/angular/template/stories/core/moduleMetadata/merge-default-and-story.stories.ts index 81fe10181801..0a1c52eec84a 100644 --- a/code/examples/angular-cli/src/stories/core/moduleMetadata/merge-default-and-story.stories.ts +++ b/code/frameworks/angular/template/stories/core/moduleMetadata/merge-default-and-story.stories.ts @@ -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: ``, + 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: ``, - props: { - name: 'Prop Name', - }, - moduleMetadata: { - declarations: [CustomPipePipe], - providers: [], - }, -}); -MergeWithDefaultModuleMetadata.storyName = 'Merge with default ModuleMetadata'; diff --git a/code/examples/angular-cli/src/stories/core/parameters/bootstrap-options.stories.ts b/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts similarity index 88% rename from code/examples/angular-cli/src/stories/core/parameters/bootstrap-options.stories.ts rename to code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts index dfe3115f9951..8a79b7d95ebe 100644 --- a/code/examples/angular-cli/src/stories/core/parameters/bootstrap-options.stories.ts +++ b/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts @@ -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) => ({}); diff --git a/code/examples/angular-cli/src/stories/core/styles/story-styles.stories.ts b/code/frameworks/angular/template/stories/core/styles/story-styles.stories.ts similarity index 90% rename from code/examples/angular-cli/src/stories/core/styles/story-styles.stories.ts rename to code/frameworks/angular/template/stories/core/styles/story-styles.stories.ts index a8fb561efc94..c38a23d6c3a5 100644 --- a/code/examples/angular-cli/src/stories/core/styles/story-styles.stories.ts +++ b/code/frameworks/angular/template/stories/core/styles/story-styles.stories.ts @@ -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: ``, @@ -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; diff --git a/code/examples/angular-cli/src/stories/legacy/README.stories.mdx b/code/frameworks/angular/template/stories/legacy/README.stories.mdx similarity index 69% rename from code/examples/angular-cli/src/stories/legacy/README.stories.mdx rename to code/frameworks/angular/template/stories/legacy/README.stories.mdx index f1a838261aef..792f95a4a86b 100644 --- a/code/examples/angular-cli/src/stories/legacy/README.stories.mdx +++ b/code/frameworks/angular/template/stories/legacy/README.stories.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs'; - + # Legacy examples diff --git a/code/examples/angular-cli/src/stories/legacy/component-in-story.stories.ts b/code/frameworks/angular/template/stories/legacy/component-in-story.stories.ts similarity index 66% rename from code/examples/angular-cli/src/stories/legacy/component-in-story.stories.ts rename to code/frameworks/angular/template/stories/legacy/component-in-story.stories.ts index f42d2fb016c8..58df68b46181 100644 --- a/code/examples/angular-cli/src/stories/legacy/component-in-story.stories.ts +++ b/code/frameworks/angular/template/stories/legacy/component-in-story.stories.ts @@ -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; diff --git a/code/examples/angular-cli/src/stories/others/issues/12009-unknown-component.stories.ts b/code/frameworks/angular/template/stories/others/issues/12009-unknown-component.stories.ts similarity index 71% rename from code/examples/angular-cli/src/stories/others/issues/12009-unknown-component.stories.ts rename to code/frameworks/angular/template/stories/others/issues/12009-unknown-component.stories.ts index a084c754feac..341107732a9c 100644 --- a/code/examples/angular-cli/src/stories/others/issues/12009-unknown-component.stories.ts +++ b/code/frameworks/angular/template/stories/others/issues/12009-unknown-component.stories.ts @@ -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; diff --git a/code/examples/angular-cli/src/stories/others/ngx-translate/README.stories.mdx b/code/frameworks/angular/template/stories/others/ngx-translate/README.stories.mdx similarity index 96% rename from code/examples/angular-cli/src/stories/others/ngx-translate/README.stories.mdx rename to code/frameworks/angular/template/stories/others/ngx-translate/README.stories.mdx index 12abda943c4e..32d1cfcd3b7b 100644 --- a/code/examples/angular-cli/src/stories/others/ngx-translate/README.stories.mdx +++ b/code/frameworks/angular/template/stories/others/ngx-translate/README.stories.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs'; - + # [ngx-translate](https://github.com/ngx-translate/core) diff --git a/code/frameworks/angular/template/stories/parent.component.ts b/code/frameworks/angular/template/stories/parent.component.ts deleted file mode 100644 index f49ce1bb1873..000000000000 --- a/code/frameworks/angular/template/stories/parent.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Component, Input, Output, EventEmitter } from '@angular/core'; - -@Component({ - selector: 'parent-component', - template: ` - Parent
- Input text: {{ parentText }}
- Output :
-
- `, -}) -export default class ParentComponent { - @Input() - parentText = ''; - - @Output() - onClickParent = new EventEmitter(); -}