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

…sues
mcaj-admin · Jun 25, 2019 · 3b015d5 · 3b015d5
1 parent 9232a15
commit 3b015d5
Show file tree

Hide file tree

Showing 23 changed files with 117 additions and 103 deletions.
diff --git a/.eslintignore b/.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-*
diff --git a/addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx b/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;
diff --git a/addons/ondevice-backgrounds/src/BackgroundPanel.js b/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 });
   };

diff --git a/addons/ondevice-backgrounds/src/container.js b/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;

diff --git a/addons/ondevice-knobs/src/PropForm.js b/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,

diff --git a/addons/ondevice-notes/src/index.js b/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");
-}
+}
diff --git a/addons/ondevice-notes/src/register.js b/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);
   }

diff --git a/app/react-native/src/index.ts b/app/react-native/src/index.ts
@@ -1,3 +1,4 @@
+/* eslint-disable prefer-destructuring */
 import Preview from './preview';
 
 const preview = new Preview();

diff --git a/...eact-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx b/...eact-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() {

diff --git a/app/react-native/src/preview/components/OnDeviceUI/animation.ts b/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;
 

diff --git a/app/react-native/src/preview/components/OnDeviceUI/index.tsx b/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 />

diff --git a/app/react-native/src/preview/components/OnDeviceUI/navigation/index.tsx b/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';

diff --git a/app/react-native/src/preview/components/StoryListView/index.tsx b/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)
-        };
-
-        return acc;
-      }, {}));
-
-      this.setState({data, originalData: data});
+      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;
+          }, {})
+      );
+
+      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}

diff --git a/app/react-native/src/preview/components/StoryView/index.tsx b/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();
   }
 }