[No QA] Remove all inline named exports. Update style guide.

STORYBOOK.md

@@ -48,11 +48,14 @@ export default {
 const Template = args => <Button {...args} />;
 
 // Each story must be exported with a named export
-export const Default = Template.bind({});
+const Default = Template.bind({});
 Default.args = {
     text: 'Save & Continue',
     success: true,
 };
+export {
+    Default,
+};
 ```
 
 That will give us an interactive playground to test out various component attributes with the defaults we passed.

STYLE.md

@@ -264,7 +264,23 @@ ES6 provides two ways to export a module from a file: `named export` and `defaul
 - Files with multiple exports should always use named exports
 - Files with a single method or variable export are OK to use named exports
 - Mixing default and named exports in a single file is OK (e.g. in a self contained module), but should rarely be used
-- All exports should be declared at the bottom of the file
+- All exports (both default and named) should happen at the bottom of the file
+- Do **not** export individual features inline.
+
+```javascript
+// Bad
+export const something = 'nope';
+export const somethingElse = 'stop';
+
+// Good
+const something = 'yep';
+const somethingElse = 'go';
+
+export {
+    something,
+    somethingElse,
+};
+```
 
 ## Classes and constructors
 

__mocks__/react-native-permissions.js

@@ -3,12 +3,12 @@ const {RESULTS} = require('react-native-permissions/dist/commonjs/results');
 
 export {PERMISSIONS, RESULTS};
 
-export const openLimitedPhotoLibraryPicker = jest.fn((() => {}));
-export const openSettings = jest.fn(() => {});
-export const check = jest.fn(() => RESULTS.GRANTED);
-export const request = jest.fn(() => RESULTS.GRANTED);
-export const checkLocationAccuracy = jest.fn(() => 'full');
-export const requestLocationAccuracy = jest.fn(() => 'full');
+const openLimitedPhotoLibraryPicker = jest.fn((() => {}));
+const openSettings = jest.fn(() => {});
+const check = jest.fn(() => RESULTS.GRANTED);
+const request = jest.fn(() => RESULTS.GRANTED);
+const checkLocationAccuracy = jest.fn(() => 'full');
+const requestLocationAccuracy = jest.fn(() => 'full');
 
 const notificationOptions = ['alert', 'badge', 'sound', 'carPlay', 'criticalAlert', 'provisional'];
 
@@ -23,12 +23,12 @@ const notificationSettings = {
     notificationCenter: true,
 };
 
-export const checkNotifications = jest.fn(() => ({
+const checkNotifications = jest.fn(() => ({
     status: RESULTS.GRANTED,
     settings: notificationSettings,
 }));
 
-export const requestNotifications = jest.fn(options => ({
+const requestNotifications = jest.fn(options => ({
     status: RESULTS.GRANTED,
     settings: options
         .filter(option => notificationOptions.includes(option))
@@ -38,12 +38,12 @@ export const requestNotifications = jest.fn(options => ({
         }),
 }));
 
-export const checkMultiple = jest.fn(permissions => permissions.reduce((acc, permission) => ({
+const checkMultiple = jest.fn(permissions => permissions.reduce((acc, permission) => ({
     ...acc,
     [permission]: RESULTS.GRANTED,
 })));
 
-export const requestMultiple = jest.fn(permissions => permissions.reduce((acc, permission) => ({
+const requestMultiple = jest.fn(permissions => permissions.reduce((acc, permission) => ({
     ...acc,
     [permission]: RESULTS.GRANTED,
 })));
@@ -63,3 +63,16 @@ export default {
     requestMultiple,
     requestNotifications,
 };
+
+export {
+    openLimitedPhotoLibraryPicker,
+    openSettings,
+    check,
+    request,
+    checkLocationAccuracy,
+    requestLocationAccuracy,
+    checkNotifications,
+    requestNotifications,
+    checkMultiple,
+    requestMultiple,
+};

__mocks__/urbanairship-react-native.js

@@ -1,12 +1,12 @@
-export default {
-    setUserNotificationsEnabled: jest.fn(),
-};
-
 const EventType = {
     NotificationResponse: 'notificationResponse',
     PushReceived: 'pushReceived',
 };
 
+export default {
+    setUserNotificationsEnabled: jest.fn(),
+};
+
 export {
     EventType,
 };

src/components/withDrawerState.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {useDrawerStatus} from '@react-navigation/drawer';
 import getComponentDisplayName from '../libs/getComponentDisplayName';
 
-export const withDrawerPropTypes = {
+const withDrawerPropTypes = {
     isDrawerOpen: PropTypes.bool.isRequired,
 };
 
@@ -36,3 +36,7 @@ export default function withDrawerState(WrappedComponent) {
         <WithDrawerState {...props} forwardedRef={ref} />
     ));
 }
+
+export {
+    withDrawerPropTypes,
+};

src/libs/Growl.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import CONST from '../CONST';
 
-export const growlRef = React.createRef();
+const growlRef = React.createRef();
 
 /**
  * Show the growl notification
@@ -39,3 +39,7 @@ export default {
     error,
     success,
 };
+
+export {
+    growlRef,
+};

src/libs/Navigation/Navigation.js

@@ -21,7 +21,7 @@ Onyx.connect({
     callback: val => isLoggedIn = Boolean(val && val.authToken),
 });
 
-export const navigationRef = createNavigationContainerRef();
+const navigationRef = createNavigationContainerRef();
 
 // This flag indicates that we're trying to deeplink to a report when react-navigation is not fully loaded yet.
 // If true, this flag will cause the drawer to start in a closed state (which is not the default for small screens)
@@ -204,3 +204,7 @@ export default {
     getDefaultDrawerState,
     setDidTapNotification,
 };
+
+export {
+    navigationRef,
+};

src/libs/canCaptureMetrics/index.js

@@ -1,6 +1,11 @@
 import CONFIG from '../../CONFIG';
 
 // We don't capture performance metrics on web as there are enough tools available
-export const canCapturePerformanceMetrics = () => false;
+const canCapturePerformanceMetrics = () => false;
 
-export const canCaptureOnyxMetrics = () => Boolean(CONFIG.ONYX_METRICS);
+const canCaptureOnyxMetrics = () => Boolean(CONFIG.ONYX_METRICS);
+
+export {
+    canCapturePerformanceMetrics,
+    canCaptureOnyxMetrics,
+};

src/libs/canCaptureMetrics/index.native.js

@@ -5,11 +5,16 @@ import CONFIG from '../../CONFIG';
  *
  * @returns {Boolean}
  */
-export const canCapturePerformanceMetrics = () => CONFIG.CAPTURE_METRICS;
+const canCapturePerformanceMetrics = () => CONFIG.CAPTURE_METRICS;
 
 /**
  * Is capturing Onyx stats enabled.
  *
  * @returns {Boolean}
  */
-export const canCaptureOnyxMetrics = () => CONFIG.ONYX_METRICS;
+const canCaptureOnyxMetrics = () => CONFIG.ONYX_METRICS;
+
+export {
+    canCapturePerformanceMetrics,
+    canCaptureOnyxMetrics,
+};

src/pages/home/report/ContextMenu/ContextMenuActions.js

@@ -22,7 +22,7 @@ function getActionText(reportAction) {
     return lodashGet(message, 'html', '');
 }
 
-export const CONTEXT_MENU_TYPES = {
+const CONTEXT_MENU_TYPES = {
     LINK: 'LINK',
     REPORT_ACTION: 'REPORT_ACTION',
 };
@@ -132,3 +132,7 @@ export default [
         },
     },
 ];
+
+export {
+    CONTEXT_MENU_TYPES,
+};

src/stories/Button.stories.js

@@ -16,8 +16,8 @@ const Template = args => <Button {...args} />;
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-export const Default = Template.bind({});
-export const Loading = Template.bind({});
+const Default = Template.bind({});
+const Loading = Template.bind({});
 Default.args = {
     text: 'Save & Continue',
     success: true,
@@ -27,3 +27,8 @@ Loading.args = {
     isLoading: true,
     success: true,
 };
+
+export {
+    Default,
+    Loading,
+};

src/stories/ButtonWithDropdown.stories.js

@@ -16,7 +16,11 @@ const Template = args => <ButtonWithDropdown {...args} />;
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-export const Default = Template.bind({});
+const Default = Template.bind({});
 Default.args = {
     buttonText: 'Pay with Venmo',
 };
+
+export {
+    Default,
+};

src/stories/Checkbox.stories.js

@@ -16,8 +16,12 @@ const Template = args => <Checkbox {...args} />;
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-export const Default = Template.bind({});
+const Default = Template.bind({});
 Default.args = {
     onPress: () => {},
     isChecked: true,
 };
+
+export {
+    Default,
+};

src/stories/CheckboxWithLabel.stories.js

@@ -18,9 +18,9 @@ const Template = args => <CheckboxWithLabel {...args} />;
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-export const Default = Template.bind({});
-export const WithLabelComponent = Template.bind({});
-export const WithErrors = Template.bind({});
+const Default = Template.bind({});
+const WithLabelComponent = Template.bind({});
+const WithErrors = Template.bind({});
 Default.args = {
     isChecked: true,
     label: 'Plain text label',
@@ -46,3 +46,9 @@ WithErrors.args = {
     onPress: () => {},
     label: 'I accept the Terms & Conditions',
 };
+
+export {
+    Default,
+    WithLabelComponent,
+    WithErrors,
+};

src/stories/Datepicker.stories.js

@@ -26,8 +26,8 @@ const Template = args => <DatePicker {...args} />;
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-export const Default = Template.bind({});
-export const PreFilled = Template.bind({});
+const Default = Template.bind({});
+const PreFilled = Template.bind({});
 Default.args = {
     label: 'Select Date',
 };
@@ -36,3 +36,8 @@ PreFilled.args = {
     label: 'Select Date',
     value: new Date(2018, 7, 21),
 };
+
+export {
+    Default,
+    PreFilled,
+};

src/stories/Header.stories.js

@@ -16,8 +16,12 @@ const Template = args => <Header {...args} />;
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-export const Default = Template.bind({});
+const Default = Template.bind({});
 Default.args = {
     title: 'Chats',
     shouldShowEnvironmentBadge: true,
 };
+
+export {
+    Default,
+};

src/stories/HeaderWithCloseButton.stories.js

@@ -16,9 +16,9 @@ const Template = args => <HeaderWithCloseButton {...args} />;
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-export const Default = Template.bind({});
-export const Attachment = Template.bind({});
-export const Profile = Template.bind({});
+const Default = Template.bind({});
+const Attachment = Template.bind({});
+const Profile = Template.bind({});
 Default.args = {
     title: 'Settings',
 };
@@ -30,3 +30,9 @@ Profile.args = {
     title: 'Profile',
     shouldShowBackButton: true,
 };
+
+export {
+    Default,
+    Attachment,
+    Profile,
+};