Fix local yarn lint

.eslintignore

@@ -12,6 +12,8 @@ scripts/storage
 *.bundle.js
 *.js.map
 *.d.ts
+examples/ember-cli/.storybook/preview-head.html
+examples/official-storybook/tests/addon-jest.test.js
 
 !.remarkrc.js
 !.babelrc.js

.eslintrc.js

@@ -16,7 +16,26 @@ module.exports = {
     'react/jsx-fragments': ignore,
     '@typescript-eslint/ban-ts-ignore': ignore,
     '@typescript-eslint/no-object-literal-type-assertion': ignore,
-    'react/sort-comp': 'warn',
+    'react/sort-comp': [
+      'warn',
+      {
+        order: [
+          'staticLifecycle',
+          'static-methods',
+          'instance-variables',
+          'lifecycle',
+          '/^on.+$/',
+          '/^(get|set)(?!(DerivedStateFromProps|SnapshotBeforeUpdate$)).+$/',
+          'instance-methods',
+          'instance-variables',
+          'everything-else',
+          'render',
+        ],
+        groups: {
+          staticLifecycle: ['displayName', 'propTypes', 'defaultProps', 'getDerivedStateFromProps'],
+        },
+      },
+    ],
     'max-classes-per-file': ignore,
   },
   overrides: [

addons/events/src/components/Event.tsx

@@ -121,6 +121,20 @@ class Item extends Component<ItemProps, ItemState> {
     payload: {},
   };
 
+  static getDerivedStateFromProps = ({ payload }: ItemProps, { prevPayload }: ItemState) => {
+    if (!isEqual(payload, prevPayload)) {
+      const payloadString = json.plain(payload);
+      const refinedPayload = getJSONFromString(payloadString);
+      return {
+        failed: false,
+        payload: refinedPayload,
+        payloadString,
+        prevPayload: refinedPayload,
+      };
+    }
+    return null;
+  };
+
   state: ItemState = {
     isTextAreaShowed: false,
     failed: false,
@@ -160,20 +174,6 @@ class Item extends Component<ItemProps, ItemState> {
     }));
   };
 
-  static getDerivedStateFromProps = ({ payload }: ItemProps, { prevPayload }: ItemState) => {
-    if (!isEqual(payload, prevPayload)) {
-      const payloadString = json.plain(payload);
-      const refinedPayload = getJSONFromString(payloadString);
-      return {
-        failed: false,
-        payload: refinedPayload,
-        payloadString,
-        prevPayload: refinedPayload,
-      };
-    }
-    return null;
-  };
-
   render() {
     const { title, name } = this.props;
     const { failed, isTextAreaShowed, payloadString } = this.state;

examples/angular-cli/.eslintignore

@@ -0,0 +1 @@
+addon-jest.testresults.json

examples/angular-cli/.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  overrides: [
+    {
+      files: ['./stories/addon-jest.stories.ts'],
+      settings: {
+        'import/core-modules': ['../../addon-jest.testresults.json'],
+      },
+    },
+  ],
+};

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

@@ -2,7 +2,6 @@ import { storiesOf } from '@storybook/angular';
 import { withTests } from '@storybook/addon-jest';
 
 import { AppComponent } from '../app/app.component';
-// eslint-disable-next-line
 import * as results from '../../addon-jest.testresults.json';
 
 storiesOf('Addon|Jest', module)

examples/cra-kitchen-sink/src/components/LifecycleLogger.js

@@ -19,22 +19,22 @@ class LifecycleLogger extends Component {
     log('componentDidMount');
   }
 
-  componentDidUpdate() {
-    log('componentDidUpdate');
-  }
-
-  componentWillUnmount() {
-    log('componentWillUnmount');
-  }
-
   getSnapshotBeforeUpdate() {
     log('getSnapshotBeforeUpdate');
   }
 
+  componentDidUpdate() {
+    log('componentDidUpdate');
+  }
+
   componentDidCatch() {
     log('componentDidCatch');
   }
 
+  componentWillUnmount() {
+    log('componentWillUnmount');
+  }
+
   render() {
     log('render');
     return <div>Lifecycle methods are logged to the console</div>;

examples/ember-cli/.eslintignore

@@ -0,0 +1 @@
+.storybook/preview-head.html

lib/cli-sb/README.md

@@ -1,3 +1,3 @@
 # Storybook CLI
 
-This is a wrapper for https://www.npmjs.com/package/@storybook/cli
+This is a wrapper for <https://www.npmjs.com/package/@storybook/cli>

lib/cli-storybook/README.md

@@ -1,3 +1,3 @@
 # Storybook CLI
 
-This is a wrapper for https://www.npmjs.com/package/@storybook/cli
+This is a wrapper for <https://www.npmjs.com/package/@storybook/cli>

lib/ui/src/components/layout/container.js

@@ -287,37 +287,6 @@ class Layout extends Component {
     };
   }
 
-  componentDidUpdate(prevProps, prevState) {
-    const { resizerPanel, resizerNav } = this.state;
-
-    persistence.set({
-      resizerPanel,
-      resizerNav,
-    });
-    const { width: prevWidth, height: prevHeight } = prevProps.bounds;
-    const { bounds, options } = this.props;
-    const { width, height } = bounds;
-    if (width !== prevWidth || height !== prevHeight) {
-      const { panelPosition } = options;
-      const isPanelBottom = panelPosition === 'bottom';
-      if (isPanelBottom) {
-        this.setState({
-          resizerPanel: {
-            x: prevState.resizerPanel.x,
-            y: prevState.resizerPanel.y - (prevHeight - height),
-          },
-        });
-      } else {
-        this.setState({
-          resizerPanel: {
-            x: prevState.resizerPanel.x - (prevWidth - width),
-            y: prevState.resizerPanel.y,
-          },
-        });
-      }
-    }
-  }
-
   static getDerivedStateFromProps(props, state) {
     const { bounds, options } = props;
     const { resizerPanel, resizerNav } = state;
@@ -375,6 +344,37 @@ class Layout extends Component {
     return mutation.resizerPanel || mutation.resizerNav ? { ...state, ...mutation } : state;
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    const { resizerPanel, resizerNav } = this.state;
+
+    persistence.set({
+      resizerPanel,
+      resizerNav,
+    });
+    const { width: prevWidth, height: prevHeight } = prevProps.bounds;
+    const { bounds, options } = this.props;
+    const { width, height } = bounds;
+    if (width !== prevWidth || height !== prevHeight) {
+      const { panelPosition } = options;
+      const isPanelBottom = panelPosition === 'bottom';
+      if (isPanelBottom) {
+        this.setState({
+          resizerPanel: {
+            x: prevState.resizerPanel.x,
+            y: prevState.resizerPanel.y - (prevHeight - height),
+          },
+        });
+      } else {
+        this.setState({
+          resizerPanel: {
+            x: prevState.resizerPanel.x - (prevWidth - width),
+            y: prevState.resizerPanel.y,
+          },
+        });
+      }
+    }
+  }
+
   resizeNav = (e, data) => {
     if (data.deltaX) {
       this.setState({ resizerNav: { x: data.x, y: data.y } });