SYNC prettier printWidth with eslint && FIX resulting linting warnings

addons/actions/src/components/ActionLogger/index.tsx

@@ -16,7 +16,9 @@ export const Wrapper = styled(({ children, className }) => (
   padding: '10px 5px 20px',
 });
 
-const ThemedInspector = withTheme(({ theme, ...props }) => <Inspector theme={theme.addonActionsTheme || 'chromeLight'} {...props} />);
+const ThemedInspector = withTheme(({ theme, ...props }) => (
+  <Inspector theme={theme.addonActionsTheme || 'chromeLight'} {...props} />
+));
 
 interface ActionLoggerProps {
   actions: ActionDisplay[];
@@ -30,7 +32,12 @@ export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => (
         <Action key={action.id}>
           {action.count > 1 && <Counter>{action.count}</Counter>}
           <InspectorContainer>
-            <ThemedInspector sortObjectKeys showNonenumerable={false} name={action.data.name} data={action.data.args || action.data} />
+            <ThemedInspector
+              sortObjectKeys
+              showNonenumerable={false}
+              name={action.data.name}
+              data={action.data.args || action.data}
+            />
           </InspectorContainer>
         </Action>
       ))}

addons/actions/src/preview/decorateAction.ts

@@ -10,7 +10,9 @@ const applyDecorators = (decorators: DecoratorFunction[], actionCallback: Handle
   };
 };
 
-export const decorateAction = (decorators: DecoratorFunction[]): ((name: string, options?: ActionOptions) => HandlerFunction) => {
+export const decorateAction = (
+  decorators: DecoratorFunction[]
+): ((name: string, options?: ActionOptions) => HandlerFunction) => {
   return (name: string, options?: ActionOptions) => {
     const callAction = action(name, options);
     return applyDecorators(decorators, callAction);

addons/actions/src/preview/withActions.ts

@@ -50,7 +50,8 @@ const actionsSubscription = (...args: any[]) => {
     const handlers = createHandlers(...args);
     lastSubscription = () => {
       handlers.forEach(({ eventName, handler }) => root.addEventListener(eventName, handler));
-      return () => handlers.forEach(({ eventName, handler }) => root.removeEventListener(eventName, handler));
+      return () =>
+        handlers.forEach(({ eventName, handler }) => root.removeEventListener(eventName, handler));
     };
   }
   return lastSubscription;

addons/backgrounds/src/components/ColorIcon.tsx

@@ -10,5 +10,5 @@ export const ColorIcon = styled.span(
   }),
   ({ theme }) => ({
     boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
-  }),
+  })
 );

addons/backgrounds/src/containers/BackgroundSelector.tsx

@@ -31,7 +31,10 @@ const createBackgroundSelectorItem = memoize(1000)(
   })
 );
 
-const getSelectedBackgroundColor = (list: BackgroundConfig[], currentSelectedValue: string): string => {
+const getSelectedBackgroundColor = (
+  list: BackgroundConfig[],
+  currentSelectedValue: string
+): string => {
   if (!list.length) {
     return 'transparent';
   }
@@ -51,30 +54,36 @@ const getSelectedBackgroundColor = (list: BackgroundConfig[], currentSelectedVal
   return 'transparent';
 };
 
-const getDisplayableState = memoize(10)((props: BackgroundToolProps, state: BackgroundToolState, change) => {
-  const data = props.api.getCurrentStoryData();
-  const list: BackgroundConfig[] = (data && data.parameters && data.parameters[PARAM_KEY]) || [];
-
-  const selectedBackgroundColor = getSelectedBackgroundColor(list, state.selected);
-
-  let availableBackgroundSelectorItems: BackgroundSelectorItem[] = [];
-
-  if (selectedBackgroundColor !== 'transparent') {
-    availableBackgroundSelectorItems.push(createBackgroundSelectorItem('reset', 'Clear background', 'transparent', null, change));
-  }
-
-  if (list.length) {
-    availableBackgroundSelectorItems = [
-      ...availableBackgroundSelectorItems,
-      ...list.map(({ name, value }) => createBackgroundSelectorItem(null, name, value, true, change)),
-    ];
+const getDisplayableState = memoize(10)(
+  (props: BackgroundToolProps, state: BackgroundToolState, change) => {
+    const data = props.api.getCurrentStoryData();
+    const list: BackgroundConfig[] = (data && data.parameters && data.parameters[PARAM_KEY]) || [];
+
+    const selectedBackgroundColor = getSelectedBackgroundColor(list, state.selected);
+
+    let availableBackgroundSelectorItems: BackgroundSelectorItem[] = [];
+
+    if (selectedBackgroundColor !== 'transparent') {
+      availableBackgroundSelectorItems.push(
+        createBackgroundSelectorItem('reset', 'Clear background', 'transparent', null, change)
+      );
+    }
+
+    if (list.length) {
+      availableBackgroundSelectorItems = [
+        ...availableBackgroundSelectorItems,
+        ...list.map(({ name, value }) =>
+          createBackgroundSelectorItem(null, name, value, true, change)
+        ),
+      ];
+    }
+
+    return {
+      items: availableBackgroundSelectorItems,
+      selectedBackgroundColor,
+    };
   }
-
-  return {
-    items: availableBackgroundSelectorItems,
-    selectedBackgroundColor,
-  };
-});
+);
 
 interface BackgroundToolProps {
   api: {
@@ -119,7 +128,11 @@ export class BackgroundSelector extends Component<BackgroundToolProps, Backgroun
 
   render() {
     const { expanded } = this.state;
-    const { items, selectedBackgroundColor } = getDisplayableState(this.props, this.state, this.change);
+    const { items, selectedBackgroundColor } = getDisplayableState(
+      this.props,
+      this.state,
+      this.change
+    );
 
     return items.length ? (
       <Fragment>
@@ -136,11 +149,17 @@ export class BackgroundSelector extends Component<BackgroundToolProps, Backgroun
           placement="top"
           trigger="click"
           tooltipShown={expanded}
-          onVisibilityChange={(newVisibility: boolean) => this.setState({ expanded: newVisibility })}
+          onVisibilityChange={(newVisibility: boolean) =>
+            this.setState({ expanded: newVisibility })
+          }
           tooltip={<TooltipLinkList links={items} />}
           closeOnClick
         >
-          <IconButton key="background" active={selectedBackgroundColor !== 'transparent'} title="Change the background of the preview">
+          <IconButton
+            key="background"
+            active={selectedBackgroundColor !== 'transparent'}
+            title="Change the background of the preview"
+          >
             <Icons icon="photo" />
           </IconButton>
         </WithTooltip>

addons/notes/src/Panel.tsx

@@ -4,7 +4,12 @@ import { types } from '@storybook/addons';
 import { styled } from '@storybook/theming';
 import { STORY_RENDERED } from '@storybook/core-events';
 
-import { SyntaxHighlighter as SyntaxHighlighterBase, Placeholder, DocumentFormatting, Link } from '@storybook/components';
+import {
+  SyntaxHighlighter as SyntaxHighlighterBase,
+  Placeholder,
+  DocumentFormatting,
+  Link,
+} from '@storybook/components';
 import Giphy from './giphy';
 import Markdown from 'markdown-to-jsx';
 
@@ -46,7 +51,7 @@ export const SyntaxHighlighter = (props: any) => {
   if (props.className === undefined) {
     return <code>{props.children}</code>;
   }
-  //className: "lang-jsx"
+  // className: "lang-jsx"
   const language = props.className.split('-');
   return <SyntaxHighlighterBase language={language[1]} bordered copyable {...props} />;
 };
@@ -112,7 +117,10 @@ export default class NotesPanel extends React.Component<Props, NotesPanelState>
     }
 
     // TODO: memoize
-    const extraElements = Object.entries(api.getElements(types.NOTES_ELEMENT)).reduce((acc, [k, v]) => ({ ...acc, [k]: v.render }), {});
+    const extraElements = Object.entries(api.getElements(types.NOTES_ELEMENT)).reduce(
+      (acc, [k, v]) => ({ ...acc, [k]: v.render }),
+      {}
+    );
     const options = {
       ...defaultOptions,
       overrides: { ...defaultOptions.overrides, ...extraElements },
@@ -129,7 +137,11 @@ export default class NotesPanel extends React.Component<Props, NotesPanelState>
         <React.Fragment>No notes yet</React.Fragment>
         <React.Fragment>
           Learn how to{' '}
-          <Link href="https://github.com/storybooks/storybook/tree/master/addons/notes" target="_blank" withArrow>
+          <Link
+            href="https://github.com/storybooks/storybook/tree/master/addons/notes"
+            target="_blank"
+            withArrow
+          >
             document components in Markdown
           </Link>
         </React.Fragment>

addons/notes/src/index.ts

@@ -8,26 +8,32 @@ export const withNotes = makeDecorator({
   skipIfNoParametersOrOptions: true,
   allowDeprecatedUsage: true,
 
-  wrapper: deprecate((getStory: StoryGetter, context: StoryContext, { options, parameters }: WrapperSettings) => {
-    const storyOptions = parameters || options;
+  wrapper: deprecate(
+    (getStory: StoryGetter, context: StoryContext, { options, parameters }: WrapperSettings) => {
+      const storyOptions = parameters || options;
 
-    const { text, markdown } =
-      typeof storyOptions === 'string'
-        ? {
-            text: storyOptions,
-            markdown: undefined,
-          }
-        : storyOptions;
+      const { text, markdown } =
+        typeof storyOptions === 'string'
+          ? {
+              text: storyOptions,
+              markdown: undefined,
+            }
+          : storyOptions;
 
-    if (!text && !markdown) {
-      throw new Error(`Parameter 'notes' must must be a string or an object with 'text' or 'markdown' properties`);
-    }
+      if (!text && !markdown) {
+        throw new Error(
+          `Parameter 'notes' must must be a string or an object with 'text' or 'markdown' properties`
+        );
+      }
 
-    return getStory(context);
-  }, 'withNotes is deprecated'),
+      return getStory(context);
+    },
+    'withNotes is deprecated'
+  ),
 });
 
-export const withMarkdownNotes = deprecate((text: string, options: any) => {}, 'withMarkdownNotes is deprecated');
+export const withMarkdownNotes = deprecate((text: string, options: any) => {},
+'withMarkdownNotes is deprecated');
 
 if (module && module.hot && module.hot.decline) {
   module.hot.decline();

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

@@ -43,7 +43,13 @@ export const initModuleData = (storyObj: NgStory): any => {
     props,
   };
 
-  const moduleMeta = getModuleMeta([AppComponent, AnnotatedComponent], [AnnotatedComponent], [AppComponent], story, moduleMetadata);
+  const moduleMeta = getModuleMeta(
+    [AppComponent, AnnotatedComponent],
+    [AnnotatedComponent],
+    [AppComponent],
+    story,
+    moduleMetadata
+  );
 
   return {
     AppComponent,

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

@@ -9,7 +9,10 @@ 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

@@ -51,7 +51,13 @@ const initModule = (storyFn: IStoryFn) => {
     props,
   };
 
-  return getModule([AppComponent, AnnotatedComponent], [AnnotatedComponent], [AppComponent], story, moduleMetadata);
+  return getModule(
+    [AppComponent, AnnotatedComponent],
+    [AnnotatedComponent],
+    [AppComponent],
+    story,
+    moduleMetadata
+  );
 };
 
 const staticRoot = document.getElementById('root');

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

@@ -7,29 +7,39 @@ 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/src/karma.ts

@@ -7,7 +7,10 @@ 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;

examples/angular-cli/src/stories/addon-background.stories.ts

@@ -4,7 +4,10 @@ import { AppComponent } from '../app/app.component';
 
 storiesOf('Addon|Background', module)
   .addParameters({
-    backgrounds: [{ name: 'twitter', value: '#00aced', default: true }, { name: 'facebook', value: '#3b5998' }],
+    backgrounds: [
+      { name: 'twitter', value: '#00aced', default: true },
+      { name: 'facebook', value: '#3b5998' },
+    ],
   })
   .add('background component', () => ({
     component: AppComponent,
@@ -18,7 +21,10 @@ storiesOf('Addon|Background', module)
     })
   )
   .addParameters({
-    backgrounds: [{ name: 'twitter', value: '#00aced', default: true }, { name: 'facebook', value: '#3b5998' }],
+    backgrounds: [
+      { name: 'twitter', value: '#00aced', default: true },
+      { name: 'facebook', value: '#3b5998' },
+    ],
   })
   .add('background template', () => ({
     template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,