Merge pull request #5354 from storybooks/dependabot/npm_and_yarn/pret…

…tier-1.16.1

Bump prettier from 1.15.3 to 1.16.1

README.md

@@ -261,4 +261,4 @@ Support us with a monthly donation and help us continue our activities. \[[Becom
 
 [MIT](https://github.com/storybooks/storybook/blob/master/LICENSE)
 
--the end-
+-the end-

addons/centered/angular.d.ts

@@ -1,3 +1,4 @@
+// tslint:disable-next-line:no-implicit-dependencies
 import { IStory } from '@storybook/angular';
 
 declare module '@storybook/addon-centered/angular' {

addons/notes/src/Panel.tsx

@@ -81,7 +81,7 @@ export default class NotesPanel extends React.Component<Props, NotesPanelState>
     } else {
       this.setState({ value: undefined });
     }
-  }
+  };
 
   render() {
     const { active } = this.props;

addons/storyshots/storyshots-core/src/frameworks/angular/app.component.ts

@@ -2,6 +2,7 @@
 // to provide @Inputs and subscribe to @Outputs, see
 // https://github.com/angular/angular/issues/15360
 // For the time being, the ViewContainerRef approach works pretty well.
+
 import {
   Component,
   Inject,
@@ -13,6 +14,7 @@ import {
   EventEmitter,
   SimpleChanges,
   SimpleChange,
+  // tslint:disable-next-line:no-implicit-dependencies
 } from '@angular/core';
 import { STORY } from './app.token';
 import { NgStory, ICollection } from './types';

addons/storyshots/storyshots-core/src/frameworks/angular/app.token.ts

@@ -1,3 +1,4 @@
+// tslint:disable-next-line:no-implicit-dependencies
 import { InjectionToken } from '@angular/core';
 import { NgStory } from './types';
 

addons/storyshots/storyshots-core/src/frameworks/angular/helpers.ts

@@ -1,5 +1,8 @@
+// tslint:disable-next-line:no-implicit-dependencies
 import { Component, Type } from '@angular/core';
+// tslint:disable-next-line:no-implicit-dependencies
 import { FormsModule } from '@angular/forms';
+// tslint:disable-next-line:no-implicit-dependencies
 import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent } from './app.component';
 import { STORY } from './app.token';
@@ -15,47 +18,32 @@ const getModuleMeta = (
   return {
     declarations: [...declarations, ...(moduleMetadata.declarations || [])],
     imports: [BrowserModule, FormsModule, ...(moduleMetadata.imports || [])],
-    providers: [
-      { provide: STORY, useValue: Object.assign({}, data) },
-      ...(moduleMetadata.providers || []),
-    ],
+    providers: [{ provide: STORY, useValue: { ...data } }, ...(moduleMetadata.providers || [])],
     entryComponents: [...entryComponents, ...(moduleMetadata.entryComponents || [])],
     schemas: [...(moduleMetadata.schemas || [])],
     bootstrap: [...bootstrap],
   };
 };
 
-const createComponentFromTemplate = (template: string): Function => {
+const createComponentFromTemplate = (template: string) => {
   const componentClass = class DynamicComponent {};
 
   return Component({
-    template: template,
+    template,
   })(componentClass);
 };
 
 export const initModuleData = (storyObj: NgStory): any => {
   const { component, template, props, moduleMetadata = {} } = storyObj;
 
-  let AnnotatedComponent;
-
-  if (template) {
-    AnnotatedComponent = createComponentFromTemplate(template);
-  } else {
-    AnnotatedComponent = component;
-  }
+  const AnnotatedComponent = template ? createComponentFromTemplate(template) : component;
 
   const story = {
     component: AnnotatedComponent,
     props,
   };
 
-  const moduleMeta = getModuleMeta(
-    [AppComponent, AnnotatedComponent],
-    [AnnotatedComponent],
-    [AppComponent],
-    story,
-    moduleMetadata
-  );
+  const moduleMeta = getModuleMeta([AppComponent, AnnotatedComponent], [AnnotatedComponent], [AppComponent], story, moduleMetadata);
 
   return {
     AppComponent,

addons/storyshots/storyshots-core/src/frameworks/angular/types.ts

@@ -1,9 +1,9 @@
 export interface NgModuleMetadata {
-  declarations?: Array<any>;
-  entryComponents?: Array<any>;
-  imports?: Array<any>;
-  schemas?: Array<any>;
-  providers?: Array<any>;
+  declarations?: any[];
+  entryComponents?: any[];
+  imports?: any[];
+  schemas?: any[];
+  providers?: any[];
 }
 
 export interface ICollection {

addons/storysource/package.json

@@ -26,7 +26,7 @@
     "core-js": "^2.6.2",
     "estraverse": "^4.2.0",
     "loader-utils": "^1.2.1",
-    "prettier": "^1.14.3",
+    "prettier": "^1.16.1",
     "prop-types": "^15.6.2",
     "react-syntax-highlighter": "^8.0.1",
     "regenerator-runtime": "^0.12.1"

addons/storysource/src/loader/generate-helpers.js

@@ -34,7 +34,7 @@ function prettifyCode(source, { prettierConfig, parser, filepath }) {
     if (parser) {
       config = {
         ...prettierConfig,
-        parser: parser === 'javascript' ? 'babylon' : parser,
+        parser: parser === 'javascript' ? 'babel' : parser,
       };
     } else if (filepath) {
       config = {
@@ -44,7 +44,7 @@ function prettifyCode(source, { prettierConfig, parser, filepath }) {
     } else {
       config = {
         ...prettierConfig,
-        parser: 'babylon',
+        parser: 'babel',
       };
     }
   }

addons/storysource/src/loader/parsers/parser-js.js

@@ -1,7 +1,7 @@
 import parseJs from 'prettier/parser-babylon';
 
 function parse(source) {
-  return parseJs.parsers.babylon.parse(source);
+  return parseJs.parsers.babel.parse(source);
 }
 
 export default {

app/angular/src/client/preview/angular/decorators.ts

@@ -9,10 +9,7 @@ export const moduleMetadata = (metadata: Partial<NgModuleMetadata>) => (storyFn:
     ...story,
     moduleMetadata: {
       declarations: [...(metadata.declarations || []), ...(storyMetadata.declarations || [])],
-      entryComponents: [
-        ...(metadata.entryComponents || []),
-        ...(storyMetadata.entryComponents || []),
-      ],
+      entryComponents: [...(metadata.entryComponents || []), ...(storyMetadata.entryComponents || [])],
       imports: [...(metadata.imports || []), ...(storyMetadata.imports || [])],
       schemas: [...(metadata.schemas || []), ...(storyMetadata.schemas || [])],
       providers: [...(metadata.providers || []), ...(storyMetadata.providers || [])],

app/angular/src/client/preview/angular/helpers.ts

@@ -7,7 +7,12 @@ import { STORY } from './app.token';
 import { NgModuleMetadata, IGetStory, NgStory } from './types';
 
 let platform: any = null;
-let promises: Promise<NgModuleRef<any>>[] = [];
+let promises: Array<Promise<NgModuleRef<any>>> = [];
+
+const moduleClass = class DynamicModule {};
+const componentClass = class DynamicComponent {};
+
+type DynamicComponentType = typeof componentClass;
 
 const getModule = (
   declarations: Array<Type<any> | any[]>,
@@ -19,53 +24,34 @@ const getModule = (
   const moduleMeta = {
     declarations: [...declarations, ...(moduleMetadata.declarations || [])],
     imports: [BrowserModule, FormsModule, ...(moduleMetadata.imports || [])],
-    providers: [
-      { provide: STORY, useValue: Object.assign({}, data) },
-      ...(moduleMetadata.providers || []),
-    ],
+    providers: [{ provide: STORY, useValue: { ...data } }, ...(moduleMetadata.providers || [])],
     entryComponents: [...entryComponents, ...(moduleMetadata.entryComponents || [])],
     schemas: [...(moduleMetadata.schemas || [])],
     bootstrap: [...bootstrap],
   };
 
-  const moduleClass = class DynamicModule {};
-
   return NgModule(moduleMeta)(moduleClass);
 };
 
-const createComponentFromTemplate = (template: string, styles: string[]): Function => {
-  const componentClass = class DynamicComponent {};
-
+const createComponentFromTemplate = (template: string, styles: string[]) => {
   return Component({
     template,
     styles,
   })(componentClass);
 };
 
-const initModule = (currentStory: IGetStory): Function => {
+const initModule = (currentStory: IGetStory) => {
   const storyObj = currentStory();
   const { component, template, props, styles, moduleMetadata = {} } = storyObj;
 
-  let AnnotatedComponent;
-
-  if (template) {
-    AnnotatedComponent = createComponentFromTemplate(template, styles);
-  } else {
-    AnnotatedComponent = component;
-  }
+  let AnnotatedComponent = template ? createComponentFromTemplate(template, styles) : component;
 
   const story = {
     component: AnnotatedComponent,
     props,
   };
 
-  return getModule(
-    [AppComponent, AnnotatedComponent],
-    [AnnotatedComponent],
-    [AppComponent],
-    story,
-    moduleMetadata
-  );
+  return getModule([AppComponent, AnnotatedComponent], [AnnotatedComponent], [AppComponent], story, moduleMetadata);
 };
 
 const staticRoot = document.getElementById('root');
@@ -74,7 +60,7 @@ const insertDynamicRoot = () => {
   staticRoot.appendChild(app);
 };
 
-const draw = (newModule: Function): void => {
+const draw = (newModule: DynamicComponentType): void => {
   if (!platform) {
     insertDynamicRoot();
     try {

app/angular/src/client/preview/angular/types.ts

@@ -1,9 +1,9 @@
 export interface NgModuleMetadata {
-  declarations?: Array<any>;
-  entryComponents?: Array<any>;
-  imports?: Array<any>;
-  schemas?: Array<any>;
-  providers?: Array<any>;
+  declarations?: any[];
+  entryComponents?: any[];
+  imports?: any[];
+  schemas?: any[];
+  providers?: any[];
 }
 
 export interface ICollection {

app/angular/src/demo/welcome.component.ts

@@ -7,39 +7,29 @@ import { Component, Output, EventEmitter } from '@angular/core';
       <h1>Welcome to storybook</h1>
       <p>This is a UI component dev environment for your app.</p>
       <p>
-        We've added some basic stories inside the
-        <span class="inline-code">src/stories</span> directory. <br />
-        A story is a single state of one or more UI components. You can have as many stories as you
-        want. <br />
+        We've added some basic stories inside the <span class="inline-code">src/stories</span> directory. <br />
+        A story is a single state of one or more UI components. You can have as many stories as you want. <br />
         (Basically a story is like a visual test case.)
       </p>
       <p>
-        See these sample
-        <a (click)="showApp.emit($event)" role="button" tabIndex="0">stories</a> for a component
-        called <span class="inline-code">Button</span> .
+        See these sample <a (click)="showApp.emit($event)" role="button" tabIndex="0">stories</a> for a component called
+        <span class="inline-code">Button</span> .
       </p>
       <p>
         Just like that, you can add your own components as stories. <br />
         You can also edit those components and see changes right away. <br />
-        (Try editing the <span class="inline-code">Button</span> stories located at
-        <span class="inline-code">src/stories/index.js</span>.)
+        (Try editing the <span class="inline-code">Button</span> stories located at <span class="inline-code">src/stories/index.js</span>.)
       </p>
       <p>
         Usually we create stories with smaller UI components in the app.<br />
         Have a look at the
-        <a
-          href="https://storybook.js.org/basics/writing-stories"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Writing Stories
-        </a>
-        section in our documentation.
+        <a href="https://storybook.js.org/basics/writing-stories" target="_blank" rel="noopener noreferrer"> Writing Stories </a> section in
+        our documentation.
       </p>
       <p class="note">
         <b>NOTE:</b> <br />
-        Have a look at the <span class="inline-code">.storybook/webpack.config.js</span> to add
-        webpack loaders and plugins you are using in this project.
+        Have a look at the <span class="inline-code">.storybook/webpack.config.js</span> to add webpack loaders and plugins you are using in
+        this project.
       </p>
     </main>
   `,

examples/angular-cli/e2e/app.e2e-spec.ts

@@ -1,4 +1,5 @@
 import { AppPage } from './app.po';
+// tslint:disable-next-line:no-implicit-dependencies
 import 'jasmine';
 
 describe('ng5test App', () => {
@@ -10,6 +11,6 @@ describe('ng5test App', () => {
 
   it('should display welcome message', () => {
     page.navigateTo();
-    expect(<any>page.getParagraphText()).toEqual('Welcome to app!');
+    expect(page.getParagraphText() as any).toEqual('Welcome to app!');
   });
 });

examples/angular-cli/jest-config/setup.ts

@@ -1,4 +1,5 @@
 import 'jest-preset-angular';
 import './globalMocks';
 
+// tslint:disable-next-line:no-var-requires no-implicit-dependencies
 require('babel-plugin-require-context-hook/register')();

examples/angular-cli/src/app/app.component.spec.ts

@@ -1,4 +1,5 @@
 import { TestBed, async } from '@angular/core/testing';
+// tslint:disable-next-line:no-implicit-dependencies
 import 'jasmine';
 
 import { AppComponent } from './app.component';

examples/angular-cli/src/karma.ts

@@ -7,17 +7,14 @@ import 'zone.js/dist/jasmine-patch';
 import 'zone.js/dist/async-test';
 import 'zone.js/dist/fake-async-test';
 import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing';
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 
 // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
 declare const __karma__: any;
 declare const require: any;
 
 // Prevent Karma from running prematurely.
-__karma__.loaded = function() {};
+__karma__.loaded = () => {};
 
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

examples/angular-cli/src/polyfills.ts

@@ -18,7 +18,7 @@
  * BROWSER POLYFILLS
  */
 
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+/* IE9, IE10 and IE11 requires all of the following polyfills. */
 // import 'core-js/es6/symbol';
 // import 'core-js/es6/object';
 // import 'core-js/es6/function';
@@ -37,14 +37,14 @@
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
-/** Evergreen browsers require these. **/
+/* Evergreen browsers require these. */
 import 'core-js/es6/reflect';
 import 'core-js/es7/reflect';
 
 /**
  * Required to support Web Animations `@angular/animation`.
  * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
- **/
+ */
 // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 /***************************************************************************************************