CHANGE linting config to also lint react-native && FIX all linting issues

.eslintignore

@@ -10,6 +10,7 @@ lib/cli/test
 scripts/storage
 *.bundle.js
 *.js.map
+*.d.ts
 
 !.remarkrc.js
 !.babelrc.js
@@ -18,7 +19,3 @@ scripts/storage
 !.jest.config.js
 !.storybook
 
-REACT_NATIVE
-examples-native
-react-native
-ondevice-*

addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable no-nested-ternary */
 import React from 'react';
 import { Button, View, Text } from 'react-native';
 
@@ -22,6 +24,7 @@ const theme = {
 
 class Inspect extends React.Component<{ name?: string; value: any }, { expanded: boolean }> {
   state = { expanded: false };
+
   render() {
     const { name, value } = this.props;
     const { expanded } = this.state;
@@ -52,7 +55,7 @@ class Inspect extends React.Component<{ name?: string; value: any }, { expanded:
             <View style={{ flexDirection: 'row', alignItems: 'center' }}>
               {toggle}
               {nameComponent}
-              <Text>{': ' + (value.length === 0 ? '[]' : expanded ? '[' : '[...]')}</Text>
+              <Text>{`: ${value.length === 0 ? '[]' : expanded ? '[' : '[...]'}`}</Text>
             </View>
             {expanded ? (
               <View style={{ marginLeft: 40 }}>
@@ -62,7 +65,7 @@ class Inspect extends React.Component<{ name?: string; value: any }, { expanded:
                   </View>
                 ))}
                 <View style={{ marginLeft: 20 }}>
-                  <Text>{']'}</Text>
+                  <Text>]</Text>
                 </View>
               </View>
             ) : null}
@@ -71,13 +74,13 @@ class Inspect extends React.Component<{ name?: string; value: any }, { expanded:
       }
       return (
         <View>
-          <Text>{'['}</Text>
+          <Text>[</Text>
           {value.map((v, i) => (
             <View key={i} style={{ marginLeft: 20 }}>
               <Inspect value={v} />
             </View>
           ))}
-          <Text>{']'}</Text>
+          <Text>]</Text>
         </View>
       );
     }
@@ -89,7 +92,7 @@ class Inspect extends React.Component<{ name?: string; value: any }, { expanded:
               {toggle}
               {nameComponent}
               <Text>
-                {': ' + (Object.keys(value).length === 0 ? '{}' : expanded ? '{' : '{...}')}
+                {`: ${Object.keys(value).length === 0 ? '{}' : expanded ? '{' : '{...}'}`}
               </Text>
             </View>
             {expanded ? (
@@ -124,7 +127,7 @@ class Inspect extends React.Component<{ name?: string; value: any }, { expanded:
         <View style={{ flexDirection: 'row', alignItems: 'center' }}>
           {toggle}
           {nameComponent}
-          <Text>{': '}</Text>
+          <Text>: </Text>
           <Value value={value} />
         </View>
       );
@@ -147,7 +150,7 @@ function Value({ value }: { value: any }) {
   if (value instanceof RegExp) {
     return (
       <Text style={{ color: theme.OBJECT_VALUE_REGEXP_COLOR }}>
-        {'/' + value.source + '/' + value.flags}
+        {`/${value.source}/${value.flags}`}
       </Text>
     );
   }
@@ -166,8 +169,9 @@ function Value({ value }: { value: any }) {
       );
     case 'function':
       return <Text style={{ color: theme.OBJECT_VALUE_FUNCTION_PREFIX_COLOR }}>[Function]</Text>;
+    default:
+      return <Text>{JSON.stringify(value)}</Text>;
   }
-  return <Text>{JSON.stringify(value)}</Text>;
 }
 
 export default Inspect;

addons/ondevice-backgrounds/src/BackgroundPanel.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types, react/destructuring-assignment, import/no-extraneous-dependencies */
 import React, { Component } from 'react';
 import { View, Text } from 'react-native';
 import Events from '@storybook/core-events';
@@ -36,10 +37,6 @@ const Instructions = () => (
 );
 
 export default class BackgroundPanel extends Component {
-  setBackgroundFromSwatch = background => {
-    this.props.channel.emit(Constants.UPDATE_BACKGROUND, background);
-  };
-
   componentDidMount() {
     this.props.channel.on(Events.SELECT_STORY, this.onStorySelected);
   }
@@ -48,6 +45,10 @@ export default class BackgroundPanel extends Component {
     this.props.channel.removeListener(Events.SELECT_STORY, this.onStorySelected);
   }
 
+  setBackgroundFromSwatch = background => {
+    this.props.channel.emit(Constants.UPDATE_BACKGROUND, background);
+  };
+
   onStorySelected = selection => {
     this.setState({ selection });
   };

addons/ondevice-backgrounds/src/container.js

@@ -19,9 +19,9 @@ export default class Container extends React.Component {
     channel.removeListener(Constants.UPDATE_BACKGROUND, this.onBackgroundChange);
   }
 
-  onBackgroundChange = (background) => {
+  onBackgroundChange = background => {
     this.setState({ background });
-  }
+  };
 
   render() {
     const { background } = this.state;

addons/ondevice-knobs/src/PropForm.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { View } from 'react-native';
 import PropField from './PropField';
 
-export default class propForm extends React.Component {
+export default class PropForm extends React.Component {
   makeChangeHandler(name, type) {
     return value => {
       const { onFieldChange } = this.props;
@@ -38,13 +38,13 @@ export default class propForm extends React.Component {
   }
 }
 
-propForm.displayName = 'propForm';
+PropForm.displayName = 'PropForm';
 
-propForm.defaultProps = {
+PropForm.defaultProps = {
   knobs: [],
 };
 
-propForm.propTypes = {
+PropForm.propTypes = {
   knobs: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string,

addons/ondevice-notes/src/index.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-undef
 if (__DEV__) {
   console.log("import '@storybook/addon-ondevice-notes/register' to register the notes addon");
-}
+}

addons/ondevice-notes/src/register.js

@@ -1,3 +1,6 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import { View } from 'react-native';
 import Markdown from 'react-native-simple-markdown';
@@ -7,10 +10,6 @@ import Events from '@storybook/core-events';
 export const PARAM_KEY = `notes`;
 
 class Notes extends React.Component {
-  setBackgroundFromSwatch = background => {
-    this.props.channel.emit(Constants.UPDATE_BACKGROUND, background);
-  };
-
   componentDidMount() {
     this.props.channel.on(Events.SELECT_STORY, this.onStorySelected);
   }

app/react-native/src/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable prefer-destructuring */
 import Preview from './preview';
 
 const preview = new Preview();

app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx

@@ -22,7 +22,9 @@ type Props = {
 // To avoid issues we use absolute positioned element with predefined screen size
 export default class AbsolutePositionedKeyboardAwareView extends PureComponent<Props> {
   keyboardDidShowListener: EmitterSubscription;
+
   keyboardDidHideListener: EmitterSubscription;
+
   keyboardOpen: boolean;
 
   componentWillMount() {

app/react-native/src/preview/components/OnDeviceUI/animation.ts

@@ -1,5 +1,5 @@
-import { NAVIGATOR, PREVIEW, ADDONS } from './navigation/constants';
 import { Animated } from 'react-native';
+import { NAVIGATOR, PREVIEW, ADDONS } from './navigation/constants';
 
 const PREVIEW_SCALE = 0.3;
 

app/react-native/src/preview/components/OnDeviceUI/index.tsx

@@ -60,6 +60,7 @@ const Preview: typeof TouchableOpacity = styled.TouchableOpacity`
 
 export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceUIState> {
   animatedValue: Animated.Value;
+
   channel: Channel;
 
   constructor(props: OnDeviceUIProps) {
@@ -113,12 +114,7 @@ export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceU
       keyboardAvoidingViewVerticalOffset,
     } = this.props;
 
-    const {
-      tabOpen,
-      slideBetweenAnimation,
-      previewWidth,
-      previewHeight,
-    } = this.state;
+    const { tabOpen, slideBetweenAnimation, previewWidth, previewHeight } = this.state;
 
     const previewWrapperStyles = [
       { flex: 1 },
@@ -146,18 +142,12 @@ export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceU
                 disabled={tabOpen === PREVIEW}
                 onPress={this.handleOpenPreview}
               >
-                <StoryView
-                  url={url}
-                  onDevice
-                  stories={stories}
-                />
+                <StoryView url={url} onDevice stories={stories} />
               </Preview>
             </Animated.View>
           </Animated.View>
           <Panel style={getNavigatorPanelPosition(this.animatedValue, previewWidth)}>
-            <StoryListView
-              stories={stories}
-            />
+            <StoryListView stories={stories} />
           </Panel>
           <Panel style={getAddonPanelPosition(this.animatedValue, previewWidth)}>
             <Addons />

app/react-native/src/preview/components/OnDeviceUI/navigation/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/destructuring-assignment */
 import React, { PureComponent } from 'react';
 import { View, SafeAreaView, StyleSheet } from 'react-native';
 import GestureRecognizer, { GestureRecognizerConfig } from 'react-native-swipe-gestures';

app/react-native/src/preview/components/StoryListView/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/destructuring-assignment */
 import React, { Component } from 'react';
 import { SectionList, TextInput, TouchableOpacity, View, SafeAreaView } from 'react-native';
 import styled from '@emotion/native';
@@ -103,19 +104,23 @@ export default class StoryListView extends Component<Props, State> {
   };
 
   handleStoryAdded = () => {
-    const {stories} = this.props;
+    const { stories } = this.props;
 
     if (stories) {
-      const data = Object.values(stories.raw().reduce((acc: {[kind: string]: {title: string, data: any[]}}, story: any) => {
-        acc[story.kind] = {
-          title: story.kind,
-          data: (acc[story.kind] ? acc[story.kind].data : []).concat(story)
-        };
+      const data = Object.values(
+        stories
+          .raw()
+          .reduce((acc: { [kind: string]: { title: string; data: any[] } }, story: any) => {
+            acc[story.kind] = {
+              title: story.kind,
+              data: (acc[story.kind] ? acc[story.kind].data : []).concat(story),
+            };
 
-        return acc;
-      }, {}));
+            return acc;
+          }, {})
+      );
 
-      this.setState({data, originalData: data});
+      this.setState({ data, originalData: data });
     }
   };
 
@@ -177,7 +182,7 @@ export default class StoryListView extends Component<Props, State> {
             />
           )}
           renderSectionHeader={({ section: { title } }) => (
-            <SectionHeader title={title} selected={title === selectedStory.kind}/>
+            <SectionHeader title={title} selected={title === selectedStory.kind} />
           )}
           keyExtractor={(item, index) => item + index}
           sections={data}

app/react-native/src/preview/components/StoryView/index.tsx

@@ -1,5 +1,5 @@
-import React, {Component} from 'react';
-import {View, Text} from 'react-native';
+import React, { Component } from 'react';
+import { View, Text } from 'react-native';
 import styled from '@emotion/native';
 import addons from '@storybook/addons';
 import Events from '@storybook/core-events';
@@ -36,7 +36,7 @@ export default class StoryView extends Component<Props> {
   };
 
   renderHelp = () => {
-    const {url} = this.props;
+    const { url } = this.props;
     return (
       <HelpContainer>
         {url && url.length ? (
@@ -59,19 +59,24 @@ export default class StoryView extends Component<Props> {
   );
 
   render() {
-    const {onDevice, stories} = this.props;
+    const { onDevice, stories } = this.props;
 
     const selection = stories.getSelection();
 
-    const {id, storyFn} = selection;
+    const { id, storyFn } = selection;
 
-    return storyFn ? (
-      <View key={id} style={{flex: 1}}>
-        {storyFn()}
-      </View>
-    ) : (
-      onDevice ? this.renderOnDeviceUIHelp() : this.renderHelp()
-    );
+    if (storyFn) {
+      return (
+        <View key={id} style={{ flex: 1 }}>
+          {storyFn()}
+        </View>
+      );
+    }
 
+    if (onDevice) {
+      return this.renderOnDeviceUIHelp();
+    }
+
+    return this.renderHelp();
   }
 }

app/react-native/src/preview/index.tsx

@@ -1,6 +1,7 @@
+/* eslint-disable import/no-extraneous-dependencies, no-underscore-dangle */
 import React from 'react';
-import {AsyncStorage} from 'react-native';
-import {ThemeProvider} from 'emotion-theming';
+import { AsyncStorage } from 'react-native';
+import { ThemeProvider } from 'emotion-theming';
 // @ts-ignore
 import getHost from 'rn-host-detect';
 import addons from '@storybook/addons';
@@ -8,10 +9,10 @@ import Events from '@storybook/core-events';
 import Channel from '@storybook/channels';
 import createChannel from '@storybook/channel-websocket';
 // @ts-ignore remove when client-api is migrated to TS
-import {StoryStore, ClientApi} from '@storybook/client-api';
+import { StoryStore, ClientApi } from '@storybook/client-api';
 import OnDeviceUI from './components/OnDeviceUI';
 import StoryView from './components/StoryView';
-import {theme, EmotionProps} from './components/Shared/theme';
+import { theme, EmotionProps } from './components/Shared/theme';
 
 const STORAGE_KEY = 'lastOpenedStory';
 
@@ -33,9 +34,13 @@ export type Params = {
 
 export default class Preview {
   _clientApi: ClientApi;
+
   _stories: StoryStore;
+
   _addons: any;
+
   _decorators: any[];
+
   _asyncStorageStoryId: string;
 
   constructor() {
@@ -62,7 +67,7 @@ export default class Preview {
     let channel: Channel = null;
 
     const onDeviceUI = params.onDeviceUI !== false;
-    const {initialSelection, shouldPersistSelection} = params;
+    const { initialSelection, shouldPersistSelection } = params;
 
     try {
       channel = addons.getChannel();
@@ -73,14 +78,14 @@ export default class Preview {
 
     if (!channel || params.resetStorybook) {
       if (onDeviceUI && params.disableWebsockets) {
-        channel = new Channel({async: true});
+        channel = new Channel({ async: true });
         this._setInitialStory(initialSelection, shouldPersistSelection);
       } else {
         const host = getHost(params.host || 'localhost');
         const port = `:${params.port || 7007}`;
 
         const query = params.query || '';
-        const {secured} = params;
+        const { secured } = params;
         const websocketType = secured ? 'wss' : 'ws';
         const httpType = secured ? 'https' : 'http';
 
@@ -110,10 +115,9 @@ export default class Preview {
 
     addons.loadAddons(this._clientApi);
 
-    const appliedTheme = {...theme, ...params.theme};
+    const appliedTheme = { ...theme, ...params.theme };
 
     // react-native hot module loader must take in a Class - https://github.com/facebook/react-native/issues/10991
-    // eslint-disable-next-line react/prefer-stateless-function
     return class StorybookRoot extends React.PureComponent {
       render() {
         if (onDeviceUI) {
@@ -133,7 +137,7 @@ export default class Preview {
 
         return (
           <ThemeProvider theme={appliedTheme}>
-            <StoryView stories={preview._stories} url={webUrl}/>
+            <StoryView stories={preview._stories} url={webUrl} />
           </ThemeProvider>
         );
       }
@@ -163,20 +167,20 @@ export default class Preview {
       try {
         let value = this._asyncStorageStoryId;
         if (!value) {
-          value = JSON.parse((await AsyncStorage.getItem(STORAGE_KEY)));
+          value = JSON.parse(await AsyncStorage.getItem(STORAGE_KEY));
           this._asyncStorageStoryId = value;
         }
 
         if (this._checkStory(value)) {
-            story = value;
+          story = value;
         }
       } catch (e) {
-
+        //
       }
     }
 
     if (story) {
-       return this._getStory(story);
+      return this._getStory(story);
     }
 
     const stories = this._stories.raw();
@@ -191,11 +195,12 @@ export default class Preview {
     return this._stories.fromId(storyId);
   }
 
-  _selectStoryEvent({storyId}: {storyId: string}) {
+  _selectStoryEvent({ storyId }: { storyId: string }) {
     if (storyId) {
       try {
         AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(storyId));
       } catch (e) {
+        //
       }
 
       const story = this._getStory(storyId);

examples-native/crna-kitchen-sink/App.js

@@ -1,4 +1,6 @@
-export default from './storybook';
+import StorybookUIRoot from './storybook';
+
+export { StorybookUIRoot as default };
 
 // NOTE: The code below is what CRNA generates out of the box. We currently
 // have no clever way of replacing this with Storybook's UI (Vanilla RN does!)

examples-native/crna-kitchen-sink/App.test.js

@@ -1,6 +1,7 @@
 import renderer from 'react-test-renderer';
 
 import React from 'react';
+// eslint-disable-next-line import/namespace, import/default, import/no-named-as-default, import/no-named-as-default-member
 import App from './App';
 
 it('renders without crashing', () => {

examples-native/crna-kitchen-sink/metro.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 const path = require('path');
 const blacklist = require('metro-config/src/defaults/blacklist');
 

examples-native/crna-kitchen-sink/storybook/addons.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
 import '@storybook/addon-options/register';

examples-native/crna-kitchen-sink/storybook/stories/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import { Text } from 'react-native';
 
@@ -7,6 +8,7 @@ import { linkTo } from '@storybook/addon-links';
 import { withKnobs } from '@storybook/addon-knobs';
 import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
 import knobsWrapper from './Knobs';
+// eslint-disable-next-line import/no-unresolved, import/extensions
 import Button from './Button';
 import CenterView from './CenterView';
 import Welcome from './Welcome';
@@ -20,19 +22,22 @@ addParameters({
   ],
 });
 
-storiesOf('Welcome', module).addParameters({
-  component: Welcome
-}).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />, {
-  notes: `
+storiesOf('Welcome', module)
+  .addParameters({
+    component: Welcome,
+  })
+  .add('to Storybook', () => <Welcome showApp={linkTo('Button')} />, {
+    notes: `
 # Markdown!\n
 * List Item
 * [List Item with Link](https://storybook.js.org)
 `,
-});
+  });
 
-storiesOf('Button', module).addParameters({
-  component: Button
-})
+storiesOf('Button', module)
+  .addParameters({
+    component: Button,
+  })
   .addParameters({
     backgrounds: [
       { name: 'dark', value: '#222222' },

lib/cli/generators/REACT_NATIVE/index.js

@@ -12,17 +12,12 @@ import {
 } from '../../lib/helpers';
 
 export default async (npmOptions, installServer) => {
-  const [
-    storybookVersion,
-    addonsVersion,
-    actionsVersion,
-    linksVersion,
-  ] = await getVersions(
+  const [storybookVersion, addonsVersion, actionsVersion, linksVersion] = await getVersions(
     npmOptions,
     '@storybook/react-native',
     '@storybook/addons',
     '@storybook/addon-actions',
-    '@storybook/addon-links',
+    '@storybook/addon-links'
   );
 
   // copy all files from the template directory to project directory
@@ -76,8 +71,5 @@ export default async (npmOptions, installServer) => {
 
   const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
 
-  installDependencies(npmOptions, [
-    ...devDependencies,
-    ...babelDependencies,
-  ]);
+  installDependencies(npmOptions, [...devDependencies, ...babelDependencies]);
 };

lib/cli/generators/REACT_NATIVE/template/storybook/stories/index.js

@@ -5,6 +5,7 @@ import { storiesOf } from '@storybook/react-native';
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
 
+// eslint-disable-next-line import/extensions
 import Button from './Button';
 import CenterView from './CenterView';
 import Welcome from './Welcome';

lib/client-api/src/story_store.js

@@ -93,8 +93,8 @@ export default class StoryStore extends EventEmitter {
       // preferred method to emit event.
       if (this._channel) {
         this._channel.emit(Events.STORY_RENDER);
-       }
-     
+      }
+
       // should be deprecated in future.
       this.emit(Events.STORY_RENDER);
     }, 1);