refactor(angular): replace knobs by args in all examples

examples/angular-cli/src/stories/basics/component-with-on-push/__snapshots__/on-push.stories.storyshot

@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Basics / Component with / OnPush strategy Class-specified component with OnPush and Knobs 1`] = `
+exports[`Storyshots Basics / Component with / OnPush strategy Class-specified component with OnPush and Args 1`] = `
 <storybook-wrapper>
   <storybook-on-push-box
     ng-reflect-bg-color="#FFF000"
-    ng-reflect-word="OnPush"
+    ng-reflect-word="The text"
     style="background-color: rgb(255, 240, 0);"
   >
-     Word of the day: OnPush 
+     Word of the day: The text 
   </storybook-on-push-box>
 </storybook-wrapper>
 `;

examples/angular-cli/src/stories/basics/component-with-on-push/on-push.stories.ts

@@ -1,18 +1,21 @@
-import { withKnobs, text, color } from '@storybook/addon-knobs';
+import { Meta, Story } from '@storybook/angular';
 import { OnPushBoxComponent } from './on-push-box.component';
 
 export default {
   title: 'Basics / Component with / OnPush strategy',
-  decorators: [withKnobs],
   component: OnPushBoxComponent,
-};
-
-export const ClassSpecifiedComponentWithOnPushAndKnobs = () => ({
-  props: {
-    word: text('Word', 'OnPush'),
-    bgColor: color('Box color', '#FFF000'),
+  argTypes: {
+    word: { control: 'text' },
+    bgColor: { control: 'color' },
   },
-});
+  args: {
+    word: 'The text',
+    bgColor: '#FFF000',
+  },
+} as Meta;
 
-ClassSpecifiedComponentWithOnPushAndKnobs.storyName =
-  'Class-specified component with OnPush and Knobs';
+export const ClassSpecifiedComponentWithOnPushAndArgs: Story = (args) => ({
+  props: args,
+});
+ClassSpecifiedComponentWithOnPushAndArgs.storyName =
+  'Class-specified component with OnPush and Args';

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

@@ -12,13 +12,13 @@ exports[`Storyshots Basics / Component with / Pipes Simple 1`] = `
 </storybook-wrapper>
 `;
 
-exports[`Storyshots Basics / Component with / Pipes With Knobs 1`] = `
+exports[`Storyshots Basics / Component with / Pipes With args 1`] = `
 <storybook-wrapper>
   <storybook-with-pipe
-    ng-reflect-field="foobar"
+    ng-reflect-field="Foo Bar"
   >
     <h1>
-      CustomPipe: foobar
+      CustomPipe: Foo Bar
     </h1>
   </storybook-with-pipe>
 </storybook-wrapper>

examples/angular-cli/src/stories/basics/component-with-pipe/custom-pipes.stories.ts

@@ -1,5 +1,4 @@
-import { moduleMetadata } from '@storybook/angular';
-import { withKnobs, text } from '@storybook/addon-knobs';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
 
 import { CustomPipePipe } from './custom.pipe';
 import { WithPipeComponent } from './with-pipe.component';
@@ -12,9 +11,9 @@ export default {
       declarations: [CustomPipePipe],
     }),
   ],
-};
+} as Meta;
 
-export const Simple = () => ({
+export const Simple: Story = () => ({
   props: {
     field: 'foobar',
   },
@@ -22,11 +21,13 @@ export const Simple = () => ({
 
 Simple.storyName = 'Simple';
 
-export const WithKnobsStory = () => ({
-  props: {
-    field: text('field', 'foobar'),
-  },
+export const WithArgsStory: Story = (args) => ({
+  props: args,
 });
-
-WithKnobsStory.storyName = 'With Knobs';
-WithKnobsStory.decorators = [withKnobs];
+WithArgsStory.storyName = 'With args';
+WithArgsStory.argTypes = {
+  field: { control: 'text' },
+};
+WithArgsStory.args = {
+  field: 'Foo Bar',
+};

examples/angular-cli/src/stories/basics/component-with-provider/__snapshots__/di.component.stories.storyshot

@@ -29,7 +29,7 @@ exports[`Storyshots Basics / Component with / Provider inputs and inject depende
 </storybook-wrapper>
 `;
 
-exports[`Storyshots Basics / Component with / Provider inputs and inject dependencies with knobs 1`] = `
+exports[`Storyshots Basics / Component with / Provider inputs and inject dependencies with args 1`] = `
 <storybook-wrapper>
   <storybook-di-component
     ng-reflect-title="Component dependencies"

examples/angular-cli/src/stories/basics/component-with-provider/di.component.stories.ts

@@ -1,4 +1,3 @@
-import { withKnobs, text } from '@storybook/addon-knobs';
 import { DiComponent } from './di.component';
 
 export default {
@@ -14,11 +13,13 @@ export const InputsAndInjectDependencies = () => ({
 
 InputsAndInjectDependencies.storyName = 'inputs and inject dependencies';
 
-export const InputsAndInjectDependenciesWithKnobs = () => ({
-  props: {
-    title: text('title', 'Component dependencies'),
-  },
+export const InputsAndInjectDependenciesWithArgs = (args) => ({
+  props: args,
 });
-
-InputsAndInjectDependenciesWithKnobs.storyName = 'inputs and inject dependencies with knobs';
-InputsAndInjectDependenciesWithKnobs.decorators = [withKnobs];
+InputsAndInjectDependenciesWithArgs.storyName = 'inputs and inject dependencies with args';
+InputsAndInjectDependenciesWithArgs.argTypes = {
+  title: { control: 'text' },
+};
+InputsAndInjectDependenciesWithArgs.args = {
+  title: 'Component dependencies',
+};

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Core / Story host styles With Knobs 1`] = `
+exports[`Storyshots Core / Story host styles With Args 1`] = `
 <storybook-wrapper>
   <storybook-button-component
     _ngcontent-a-c21=""

examples/angular-cli/src/stories/core/styles/story-styles.stories.ts

@@ -1,6 +1,5 @@
-import { moduleMetadata, Story } from '@storybook/angular';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
 import { action } from '@storybook/addon-actions';
-import { withKnobs, text } from '@storybook/addon-knobs';
 import { Button } from '@storybook/angular/demo';
 
 export default {
@@ -10,7 +9,7 @@ export default {
       declarations: [Button],
     }),
   ],
-};
+} as Meta;
 
 export const TemplateStory: Story = () => ({
   template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
@@ -27,15 +26,11 @@ export const TemplateStory: Story = () => ({
     `,
   ],
 });
-
 TemplateStory.storyName = 'With story template';
 
-export const WithKnobsStory = () => ({
+export const WithArgsStory: Story = (args) => ({
   template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
-  props: {
-    text: text('text', 'Button with custom styles'),
-    onClick: action('log'),
-  },
+  props: args,
   styles: [
     `
   storybook-button-component {
@@ -45,6 +40,11 @@ export const WithKnobsStory = () => ({
 `,
   ],
 });
-
-WithKnobsStory.storyName = 'With Knobs';
-WithKnobsStory.decorators = [withKnobs];
+WithArgsStory.storyName = 'With Args';
+WithArgsStory.argTypes = {
+  text: { control: 'text' },
+  onClick: { action: 'On click' },
+};
+WithArgsStory.args = {
+  text: 'Button with custom styles',
+};