chore: remove default exports [P5]

change/@fluentui-eslint-plugin-2020-07-10-12-20-36-chore-no-default-export.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Update Fluent React Northstar ESLint config to disallow default exports",
+  "packageName": "@fluentui/eslint-plugin",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-07-10T10:20:35.997Z"
+}

packages/eslint-plugin/src/configs/react-northstar.js

@@ -21,6 +21,8 @@ module.exports = {
     'react-hooks/exhaustive-deps': 'error',
     'react-hooks/rules-of-hooks': 'error',
 
+    'import/no-default-export': 'error',
+
     // False positive on arg types:
     // https://github.com/typescript-eslint/typescript-eslint/issues/46
     '@typescript-eslint/no-unused-vars': ['error', { args: 'none', ignoreRestSiblings: true }],
@@ -132,6 +134,12 @@ module.exports = {
         'import/no-extraneous-dependencies': 'off',
       },
     },
+    {
+      files: '**/examples/**/*.{ts,tsx}',
+      rules: {
+        'import/no-default-export': 'off',
+      },
+    },
     {
       files: '**/*.tsx',
       rules: {

packages/fluentui/docs/.eslintrc.json

@@ -1,7 +1,8 @@
 {
   "extends": ["plugin:@fluentui/eslint-plugin/react-northstar"],
   "rules": {
-    "no-alert": "off"
+    "no-alert": "off",
+    "import/no-default-export": "off"
   },
   "root": true
 }

packages/fluentui/docs/src/components/ComponentDoc/ComponentDocLinks.tsx

@@ -1,6 +1,8 @@
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
-import { Flex, constants, Image } from '@fluentui/react-northstar';
+import { Flex, Image } from '@fluentui/react-northstar';
+
+import config from '../../config';
 
 export default class ComponentDocLinks extends React.PureComponent<any, any> {
   static propTypes = {
@@ -29,7 +31,7 @@ export default class ComponentDocLinks extends React.PureComponent<any, any> {
           <code>
             <a
               style={{ color: 'rgba(0,0,0,.4)' }}
-              href={`${constants.repoURL}/blob/master/${repoPath}`}
+              href={`${config.repoURL}/blob/master/${repoPath}`}
               target="_blank"
               rel="noopener noreferrer"
             >

packages/fluentui/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

@@ -10,7 +10,6 @@ import {
 } from '@fluentui/docs-components';
 import {
   ComponentVariablesInput,
-  constants,
   Flex,
   ICSSInJSStyle,
   Image,
@@ -36,6 +35,7 @@ import VariableResolver from '../../VariableResolver/VariableResolver';
 import ComponentExampleVariables from './ComponentExampleVariables';
 // TODO: find replacement
 import { ReplyIcon, AcceptIcon, EditIcon } from '@fluentui/react-icons-northstar';
+import config from '../../../config';
 
 const ERROR_COLOR = '#D34';
 
@@ -323,7 +323,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
     const filename = pathParts[pathParts.length - 1];
 
     const ghEditHref = [
-      `${constants.repoURL}/edit/master/docs/src/examples/${currentCodePath}.tsx`,
+      `${config.repoURL}/edit/master/docs/src/examples/${currentCodePath}.tsx`,
       `?message=docs(${filename}): your description`,
     ].join('');
 

packages/fluentui/docs/src/components/ComponentDoc/ContributionPrompt.tsx

@@ -1,9 +1,10 @@
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
 
-import { Segment, Text, ICSSInJSStyle, constants } from '@fluentui/react-northstar';
+import { Segment, Text, ICSSInJSStyle } from '@fluentui/react-northstar';
 import { OpenOutsideIcon } from '@fluentui/react-icons-northstar';
 import MegaphoneIcon from './MegaphoneIcon';
+import config from '../../config';
 
 const wrapStyle: ICSSInJSStyle = { wordBreak: 'break-word' };
 
@@ -14,11 +15,11 @@ const ContributionPrompt: any = ({ children }) => (
       {children && <div>{children}</div>}
       <p>
         If there's no{' '}
-        <a href={`${constants.repoURL}/pulls`}>
+        <a href={`${config.repoURL}/pulls`}>
           pull request <OpenOutsideIcon size="small" />
         </a>{' '}
         open for this, you should{' '}
-        <a href={`${constants.repoURL}/blob/master/.github/CONTRIBUTING.md`}>
+        <a href={`${config.repoURL}/blob/master/.github/CONTRIBUTING.md`}>
           contribute <OpenOutsideIcon size="small" />
         </a>{' '}
         one!

packages/fluentui/docs/src/components/Sidebar/Sidebar.tsx

@@ -1,6 +1,5 @@
 import {
   Box,
-  constants,
   Flex,
   HierarchicalTree,
   HierarchicalTreeItemProps,
@@ -21,6 +20,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import { NavLink, NavLinkProps, withRouter, RouteComponentProps } from 'react-router-dom';
 import { SearchIcon, TriangleDownIcon, TriangleUpIcon, FilesTxtIcon, EditIcon } from '@fluentui/react-icons-northstar';
+import config from '../../config';
 
 type ComponentMenuItem = { displayName: string; type: string };
 
@@ -29,6 +29,7 @@ const componentMenu: ComponentMenuItem[] = require('../../componentMenu');
 const behaviorMenu: ComponentMenuItem[] = require('../../behaviorMenu');
 
 const componentsBlackList = ['Debug', 'Design'];
+const typeOrder = ['component', 'behavior'];
 
 interface SidebarState {
   query: string;
@@ -301,7 +302,7 @@ class Sidebar extends React.Component<SidebarProps & RouteComponentProps, Sideba
   };
 
   getSectionsWithoutSearchFilter = (): HierarchicalTreeItemProps[] => {
-    const treeItemsByType = _.map(constants.typeOrder, nextType => {
+    const treeItemsByType = _.map(typeOrder, nextType => {
       const items = _.chain([...componentMenu, ...behaviorMenu])
         .filter(({ type }) => type === nextType)
         .filter(({ displayName }) => !_.includes(componentsBlackList, displayName))
@@ -463,7 +464,7 @@ class Sidebar extends React.Component<SidebarProps & RouteComponentProps, Sideba
       width: '36px',
     };
 
-    const changeLogUrl: string = `${constants.repoURL}/blob/master/packages/fluentui/CHANGELOG.md`;
+    const changeLogUrl: string = `${config.repoURL}/blob/master/packages/fluentui/CHANGELOG.md`;
     const allSectionsWithoutSearchFilter = this.getSectionsWithoutSearchFilter();
 
     const escapedQuery = _.escapeRegExp(this.state.query);
@@ -563,7 +564,7 @@ class Sidebar extends React.Component<SidebarProps & RouteComponentProps, Sideba
           </CopyToClipboard>
         </Flex>
         <Flex column>
-          <a href={constants.repoURL} target="_blank" rel="noopener noreferrer" style={topItemTheme}>
+          <a href={config.repoURL} target="_blank" rel="noopener noreferrer" style={topItemTheme}>
             <Box>
               GitHub
               <Image src="public/images/github.png" width="20px" height="20px" styles={{ float: 'right' }} />

packages/fluentui/docs/src/config.ts

@@ -1,4 +1,5 @@
 const config = {
+  repoURL: 'https://github.com/microsoft/fluentui',
   getStatsUri: 'https://fluent-ui-react-stats.azurewebsites.net/api/GetPerfStats',
 };
 

packages/fluentui/e2e/.eslintrc.json

@@ -1,4 +1,7 @@
 {
   "extends": ["plugin:@fluentui/eslint-plugin/react-northstar"],
-  "root": true
+  "root": true,
+  "rules": {
+    "import/no-default-export": "off"
+  }
 }

packages/fluentui/react-bindings/src/FocusZone/AutoFocusZone.tsx

@@ -10,7 +10,7 @@ import { AutoFocusZoneProps } from './AutoFocusZone.types';
 import { getNextElement, focusAsync } from './focusUtilities';
 
 /** AutoFocusZone is used to focus inner element on mount. */
-export default class AutoFocusZone extends React.Component<AutoFocusZoneProps> {
+export class AutoFocusZone extends React.Component<AutoFocusZoneProps> {
   root = React.createRef<HTMLElement>();
 
   static propTypes = {

packages/fluentui/react-bindings/src/FocusZone/FocusTrapZone.tsx

@@ -20,7 +20,7 @@ import { FocusTrapZoneProps } from './FocusTrapZone.types';
 /** FocusTrapZone is used to trap the focus in any html element placed in body
  *  and hide other elements outside of Focus Trap Zone from accessibility tree.
  *  Pressing tab will circle focus within the inner focusable elements of the FocusTrapZone. */
-export default class FocusTrapZone extends React.Component<FocusTrapZoneProps, {}> {
+export class FocusTrapZone extends React.Component<FocusTrapZoneProps, {}> {
   static _focusStack: FocusTrapZone[] = [];
 
   _root: { current: HTMLElement | null } = { current: null };

packages/fluentui/react-bindings/src/FocusZone/FocusZone.tsx

@@ -55,7 +55,7 @@ const ALLOWED_INPUT_TYPES = ['text', 'number', 'password', 'email', 'tel', 'url'
 
 const ALLOW_VIRTUAL_ELEMENTS = false;
 
-export default class FocusZone extends React.Component<FocusZoneProps> implements IFocusZone {
+export class FocusZone extends React.Component<FocusZoneProps> implements IFocusZone {
   static propTypes = {
     className: PropTypes.string,
     direction: PropTypes.number,

packages/fluentui/react-bindings/src/FocusZone/FocusZone.types.ts

@@ -1,7 +1,7 @@
 import { FocusZoneDirection, FocusZoneProperties, FocusZoneTabbableElements } from '@fluentui/accessibility';
 import * as React from 'react';
 
-import FocusZone from './FocusZone';
+import { FocusZone } from './FocusZone';
 
 /**
  * FocusZone component class interface.

packages/fluentui/react-bindings/src/hooks/useAccessibility.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import { getAccessibility } from '../accessibility/getAccessibility';
 import { AccessibilityActionHandlers, KeyboardEventHandler, ReactAccessibilityBehavior } from '../accessibility/types';
-import FocusZone from '../FocusZone/FocusZone';
+import { FocusZone } from '../FocusZone/FocusZone';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 
 type UseAccessibilityOptions<Props> = {

packages/fluentui/react-bindings/src/index.ts

@@ -3,11 +3,11 @@ export * from './accessibility/types';
 
 export * from '@fluentui/react-compose';
 
-export { default as AutoFocusZone } from './FocusZone/AutoFocusZone';
+export { AutoFocusZone } from './FocusZone/AutoFocusZone';
 export * from './FocusZone/AutoFocusZone.types';
-export { default as FocusTrapZone } from './FocusZone/FocusTrapZone';
+export { FocusTrapZone } from './FocusZone/FocusTrapZone';
 export * from './FocusZone/FocusTrapZone.types';
-export { default as FocusZone } from './FocusZone/FocusZone';
+export { FocusZone } from './FocusZone/FocusZone';
 export * from './FocusZone/FocusZone.types';
 export * from './FocusZone/focusUtilities';
 

packages/fluentui/react-builder/src/components/DropSelector.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as _ from 'lodash';
 import { EventListener } from '@fluentui/react-component-event-listener';
 import { isBrowser } from '@fluentui/react-northstar';
-import FiberNavigator from '../../../react-northstar/src/components/Debug/FiberNavigator';
+import { FiberNavigator } from '../../../react-northstar/src/components/Debug/FiberNavigator';
 import { fiberNavFindJSONTreeElement, jsonTreeFindParent } from '../config';
 import { JSONTreeElement } from './types';
 

packages/fluentui/react-component-ref/src/Ref.tsx

@@ -2,11 +2,11 @@ import * as PropTypes from 'prop-types';
 import * as React from 'react';
 import * as ReactIs from 'react-is';
 
-import RefFindNode from './RefFindNode';
-import RefForward from './RefForward';
+import { RefFindNode } from './RefFindNode';
+import { RefForward } from './RefForward';
 import { RefProps, refPropType } from './types';
 
-const Ref: React.FunctionComponent<RefProps> = props => {
+export const Ref: React.FunctionComponent<RefProps> = props => {
   const { children, innerRef, ...rest } = props;
 
   const child = React.Children.only(children);
@@ -24,5 +24,3 @@ if (process.env.NODE_ENV !== 'production') {
     innerRef: refPropType.isRequired,
   };
 }
-
-export default Ref;

packages/fluentui/react-component-ref/src/RefFindNode.tsx

@@ -5,7 +5,7 @@ import * as ReactDOM from 'react-dom';
 import { handleRef } from './handleRef';
 import { RefProps, refPropType } from './types';
 
-export default class RefFindNode extends React.Component<RefProps> {
+export class RefFindNode extends React.Component<RefProps> {
   static displayName = 'RefFindNode';
 
   // TODO: use Babel plugin for this

packages/fluentui/react-component-ref/src/RefForward.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { handleRef } from './handleRef';
 import { RefProps, refPropType } from './types';
 
-export default class RefForward extends React.Component<RefProps> {
+export class RefForward extends React.Component<RefProps> {
   static displayName = 'RefForward';
 
   // TODO: use Babel plugin for this

packages/fluentui/react-component-ref/src/index.ts

@@ -1,8 +1,8 @@
 export { handleRef } from './handleRef';
 export { isRefObject } from './isRefObject';
 
-export { default as Ref } from './Ref';
-export { default as RefFindNode } from './RefFindNode';
-export { default as RefForward } from './RefForward';
+export { Ref } from './Ref';
+export { RefFindNode } from './RefFindNode';
+export { RefForward } from './RefForward';
 
 export * from './types';

packages/fluentui/react-northstar/src/components/Accordion/Accordion.tsx

@@ -13,8 +13,8 @@ import {
   createShorthand,
   createShorthandFactory,
 } from '../../utils';
-import AccordionTitle, { AccordionTitleProps } from './AccordionTitle';
-import AccordionContent, { AccordionContentProps } from './AccordionContent';
+import { AccordionTitle, AccordionTitleProps } from './AccordionTitle';
+import { AccordionContent, AccordionContentProps } from './AccordionContent';
 
 import {
   ComponentEventHandler,
@@ -110,7 +110,7 @@ export const accordionSlotClassNames: AccordionSlotClassNames = {
  * @accessibility
  * Implements [ARIA Accordion](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion) design pattern (keyboard navigation not yet supported).
  */
-const Accordion: ComponentWithAs<'dl', AccordionProps> &
+export const Accordion: ComponentWithAs<'dl', AccordionProps> &
   FluentComponentStaticProps<AccordionProps> & {
     Title: typeof AccordionTitle;
     Content: typeof AccordionContent;
@@ -356,5 +356,3 @@ Accordion.Content = AccordionContent;
 Accordion.create = createShorthandFactory({
   Component: Accordion,
 });
-
-export default Accordion;

packages/fluentui/react-northstar/src/components/Accordion/AccordionContent.tsx

@@ -52,7 +52,7 @@ export type AccordionContentStylesProps = Required<Pick<AccordionContentProps, '
 /**
  * An AccordionContent displays content hosted in an Accordion.
  */
-const AccordionContent: ComponentWithAs<'dd', AccordionContentProps> &
+export const AccordionContent: ComponentWithAs<'dd', AccordionContentProps> &
   FluentComponentStaticProps<AccordionContentProps> = props => {
   const context: ProviderContextPrepared = React.useContext(ThemeContext);
   const { setStart, setEnd } = useTelemetry(AccordionContent.displayName, context.telemetry);
@@ -129,5 +129,3 @@ AccordionContent.create = createShorthandFactory({
   Component: AccordionContent,
   mappedProp: 'content',
 });
-
-export default AccordionContent;

packages/fluentui/react-northstar/src/components/Accordion/AccordionTitle.tsx

@@ -20,7 +20,7 @@ import {
   FluentComponentStaticProps,
   ProviderContextPrepared,
 } from '../../types';
-import Box, { BoxProps } from '../Box/Box';
+import { Box, BoxProps } from '../Box/Box';
 import {
   ComponentWithAs,
   getElementType,
@@ -97,7 +97,7 @@ export type AccordionTitleStylesProps = Required<Pick<AccordionTitleProps, 'disa
 /**
  * An AccordionTitle represents the title of Accordion's item that can be interacted with to expand or collapse the item's content.
  */
-const AccordionTitle: ComponentWithAs<'dt', AccordionTitleProps> &
+export const AccordionTitle: ComponentWithAs<'dt', AccordionTitleProps> &
   FluentComponentStaticProps<AccordionTitleProps> = props => {
   const context: ProviderContextPrepared = React.useContext(ThemeContext);
   const { setStart, setEnd } = useTelemetry(AccordionTitle.displayName, context.telemetry);
@@ -255,5 +255,3 @@ AccordionTitle.defaultProps = {
 };
 
 AccordionTitle.create = createShorthandFactory({ Component: AccordionTitle, mappedProp: 'content' });
-
-export default AccordionTitle;

packages/fluentui/react-northstar/src/components/Alert/Alert.tsx

@@ -19,12 +19,12 @@ import {
   FluentComponentStaticProps,
   ProviderContextPrepared,
 } from '../../types';
-import Box, { BoxProps } from '../Box/Box';
+import { Box, BoxProps } from '../Box/Box';
 import { ButtonProps } from '../Button/Button';
-import Text, { TextProps } from '../Text/Text';
+import { Text, TextProps } from '../Text/Text';
 
-import ButtonGroup, { ButtonGroupProps } from '../Button/ButtonGroup';
-import AlertDismissAction, { AlertDismissActionProps } from './AlertDismissAction';
+import { ButtonGroup, ButtonGroupProps } from '../Button/ButtonGroup';
+import { AlertDismissAction, AlertDismissActionProps } from './AlertDismissAction';
 import {
   ComponentWithAs,
   useAccessibility,
@@ -129,7 +129,7 @@ export const alertSlotClassNames: AlertSlotClassNames = {
  * @accessibility
  * Implements [ARIA Alert](https://www.w3.org/TR/wai-aria-practices-1.1/#alert) design pattern.
  */
-const Alert: ComponentWithAs<'div', AlertProps> &
+export const Alert: ComponentWithAs<'div', AlertProps> &
   FluentComponentStaticProps<AlertProps> & {
     DismissAction: typeof AlertDismissAction;
   } = props => {
@@ -327,5 +327,3 @@ Alert.create = createShorthandFactory({
 });
 
 Alert.DismissAction = AlertDismissAction;
-
-export default Alert;