chore: use named import/export instead of default ones in sb/components

Named exports enables better IDE integration and simplify a lot code refactoring

addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap

@@ -63,12 +63,12 @@ exports[`A11YPanel should render loader when it's running 1`] = `
     <div
       className="emotion-4"
     >
-      <Styled(Icon)
+      <Styled(Icons)
         icon="sync"
         inline={true}
         status="running"
       >
-        <Icon
+        <Icons
           className="emotion-2"
           icon="sync"
           inline={true}
@@ -94,8 +94,8 @@ exports[`A11YPanel should render loader when it's running 1`] = `
               </Styled(path)>
             </svg>
           </Svg>
-        </Icon>
-      </Styled(Icon)>
+        </Icons>
+      </Styled(Icons)>
        Please wait while a11y scan is running ...
     </div>
   </Component>

lib/components/src/Badge/Badge.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import Badge from './Badge';
+import { Badge } from './Badge';
 
 storiesOf('Basics|Badge', module).add('all badges', () => (
   <div>

lib/components/src/Badge/Badge.tsx

@@ -49,8 +49,6 @@ export interface BadgeProps {
   status: 'positive' | 'negative' | 'neutral';
 }
 
-const Badge: FunctionComponent<BadgeProps> = ({ ...props }) => {
+export const Badge: FunctionComponent<BadgeProps> = ({ ...props }) => {
   return <BadgeWrapper {...props} />;
 };
-
-export default Badge;

lib/components/src/Button/Button.stories.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import Button from './Button';
-import Icon from '../icon/icon';
+import { Button } from './Button';
+import { Icons } from '../icon/icon';
 
-import Form from '../form/index';
+import { Form } from '../form/index';
 
 const { Button: FormButton } = Form;
 
@@ -16,7 +16,7 @@ storiesOf('Basics|Button', module).add('all buttons', () => (
     <Button primary>Primary</Button>
     <Button secondary>Secondary</Button>
     <Button outline containsIcon>
-      <Icon icon="link" />
+      <Icons icon="link" />
     </Button>
     <br />
     <Button outline>Outline</Button>
@@ -43,10 +43,10 @@ storiesOf('Basics|Button', module).add('all buttons', () => (
       Disabled
     </Button>
     <Button outline small containsIcon>
-      <Icon icon="link" />
+      <Icons icon="link" />
     </Button>
     <Button outline small>
-      <Icon icon="link" />
+      <Icons icon="link" />
       Link
     </Button>
   </div>

lib/components/src/Button/Button.tsx

@@ -233,7 +233,7 @@ interface ButtonProps {
   containsIcon?: boolean;
 }
 
-const Button: FunctionComponent<ButtonProps> = ({ isLink, children, ...props }) => {
+export const Button: FunctionComponent<ButtonProps> = ({ isLink, children, ...props }) => {
   if (isLink) {
     return <ButtonLink {...props}>{children}</ButtonLink>;
   }
@@ -243,5 +243,3 @@ const Button: FunctionComponent<ButtonProps> = ({ isLink, children, ...props })
 Button.defaultProps = {
   isLink: false,
 };
-
-export default Button;

lib/components/src/form/field/field.tsx

@@ -26,7 +26,7 @@ export interface FieldProps {
   label?: ReactNode;
 }
 
-const Field: FunctionComponent<FieldProps> = ({ label, children }) => (
+export const Field: FunctionComponent<FieldProps> = ({ label, children }) => (
   <Wrapper>
     {label ? (
       <Label>
@@ -40,5 +40,3 @@ const Field: FunctionComponent<FieldProps> = ({ label, children }) => (
 Field.defaultProps = {
   label: undefined,
 };
-
-export default Field;

lib/components/src/form/form.stories.tsx

@@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
 import { Input, Button, Select, Textarea } from './input/input';
-import Field from './field/field';
+import { Field } from './field/field';
 import { Spaced } from '../spaced/Spaced';
 
 const Flexed = styled.div({ display: 'flex' });

lib/components/src/form/index.tsx

@@ -1,8 +1,8 @@
 import { styled } from '@storybook/theming';
-import Field from './field/field';
+import { Field } from './field/field';
 import { Input, Select, Textarea, Button } from './input/input';
 
-const Form = Object.assign(
+export const Form = Object.assign(
   styled.form({
     boxSizing: 'border-box',
     width: '100%',
@@ -15,5 +15,3 @@ const Form = Object.assign(
     Button,
   }
 );
-
-export default Form;

lib/components/src/form/input/input.tsx

@@ -3,7 +3,7 @@ import { withProps } from 'recompose';
 
 import TextareaAutoResize from 'react-textarea-autosize';
 
-import StyledButton from '../../Button/Button';
+import { Button as StyledButton } from '../../Button/Button';
 
 const styleResets = {
   // resets

lib/components/src/icon/icon.stories.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { styled } from '@storybook/theming';
 import { storiesOf } from '@storybook/react';
 
-import Icon from './icon';
-import icons, { IconKey } from './icons';
+import { Icons } from './icon';
+import { icons, IconKey } from './icons';
 
 const Meta = styled.div({
   color: '#333',
@@ -61,7 +61,7 @@ storiesOf('Basics|Icon', module)
     <List>
       {list.map(key => (
         <Item key={key}>
-          <Icon icon={key} /> <Meta>{key}</Meta>
+          <Icons icon={key} /> <Meta>{key}</Meta>
         </Item>
       ))}
     </List>
@@ -70,7 +70,7 @@ storiesOf('Basics|Icon', module)
     <List>
       {list.map(key => (
         <Item minimal key={key}>
-          <Icon icon={key} />
+          <Icons icon={key} />
         </Item>
       ))}
     </List>

lib/components/src/icon/icon.tsx

@@ -8,17 +8,15 @@ const Path = styled.path({
   fill: 'currentColor',
 });
 
-export interface IconProps {
+export interface IconsProps {
   icon: IconKey;
 }
 
 // TODO: if we can resize the 1024 to 20, we can remove the size attributes
-const Icon: FunctionComponent<IconProps> = ({ icon, ...props }) => {
+export const Icons: FunctionComponent<IconsProps> = ({ icon, ...props }) => {
   return (
     <Svg viewBox="0 0 1024 1024" {...props}>
       <Path d={icons[icon]} />
     </Svg>
   );
 };
-
-export default Icon;

lib/components/src/icon/icons.tsx

@@ -1,5 +1,5 @@
 // Icon paths
-const icons = {
+export const icons = {
   mobile:
     'M648 64h-272c-66.274 0-120 53.726-120 120v656c0 66.274 53.726 120 120 120h272c66.274 0 120-53.726 120-120v-656c0-66.274-53.726-120-120-120zM376 144h272c22.056 0 40 17.944 40 40v495.968h-352v-495.968c0-22.056 17.946-40 40-40zM648 880h-272c-22.054 0-40-17.944-40-40v-80.032h352v80.032c0 22.056-17.944 40-40 40zM544.034 819.962c0 17.676-14.33 32.002-32.004 32.002-17.67 0-32-14.326-32-32.002 0-17.672 14.33-31.998 32-31.998 17.674-0 32.004 14.326 32.004 31.998z',
   watch:

lib/components/src/index.ts

@@ -1,9 +1,9 @@
-export { default as Badge } from './Badge/Badge';
+export { Badge } from './Badge/Badge';
 
 // Typography
-export { default as Link } from './typography/link/link';
-export { default as DocumentFormatting } from './typography/DocumentFormatting';
-export { default as SyntaxHighlighter } from './syntaxhighlighter/syntaxhighlighter';
+export { Link } from './typography/link/link';
+export { DocumentFormatting } from './typography/DocumentFormatting';
+export { SyntaxHighlighter } from './syntaxhighlighter/syntaxhighlighter';
 
 // UI
 export { ActionBar } from './ActionBar/ActionBar';
@@ -12,14 +12,14 @@ export { Placeholder } from './placeholder/placeholder';
 export { ScrollArea } from './ScrollArea/ScrollArea';
 
 // Forms
-export { default as Button } from './Button/Button';
-export { default as Form } from './form/index';
+export { Button } from './Button/Button';
+export { Form } from './form/index';
 
 // Tooltips
-export { default as WithTooltip } from './tooltip/WithTooltip';
-export { default as TooltipMessage } from './tooltip/TooltipMessage';
-export { default as TooltipNote } from './tooltip/TooltipNote';
-export { default as TooltipLinkList } from './tooltip/TooltipLinkList';
+export { WithTooltip } from './tooltip/WithTooltip';
+export { TooltipMessage } from './tooltip/TooltipMessage';
+export { TooltipNote } from './tooltip/TooltipNote';
+export { TooltipLinkList } from './tooltip/TooltipLinkList';
 
 // Toolbar and subcomponents
 export { Tabs, TabsState, TabBar, TabWrapper } from './tabs/tabs';
@@ -28,6 +28,6 @@ export { Separator, interleaveSeparators } from './bar/separator';
 export { Bar, FlexBar } from './bar/bar';
 
 // Graphics
-export { default as Icons } from './icon/icon';
+export { Icons } from './icon/icon';
 export { StorybookLogo } from './brand/StorybookLogo';
 export { StorybookIcon } from './brand/StorybookIcon';

lib/components/src/placeholder/placeholder.stories.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 
 import { Placeholder } from './placeholder';
-import Link from '../typography/link/link';
+import { Link } from '../typography/link/link';
 
 export default {
   Component: Placeholder,

lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import SyntaxHighlighter from './syntaxhighlighter';
+import { SyntaxHighlighter } from './syntaxhighlighter';
 
 storiesOf('Basics|SyntaxHighlighter', module)
   .add('bash', () => (

lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx

@@ -8,7 +8,7 @@ import bash from 'react-syntax-highlighter/languages/prism/bash';
 import css from 'react-syntax-highlighter/languages/prism/css';
 import html from 'react-syntax-highlighter/languages/prism/markup';
 
-import SyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/prism-light';
+import ReactSyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/prism-light';
 
 import { js as beautify } from 'js-beautify';
 import { ActionBar } from '../ActionBar/ActionBar';
@@ -76,7 +76,7 @@ const Code = styled.code({
   opacity: 1,
 });
 
-export interface CopyableCodeProps {
+export interface SyntaxHighlighterProps {
   language: string;
   copyable?: boolean;
   bordered?: boolean;
@@ -85,15 +85,17 @@ export interface CopyableCodeProps {
   className?: string;
 }
 
-export interface CopyableCodeState {
+export interface SyntaxHighlighterState {
   copied: boolean;
 }
 
-export default class CopyableCode extends Component<
-  CopyableCodeProps & SyntaxHighlighterProps,
-  CopyableCodeState
+type ReactSyntaxHighlighterProps = React.ComponentProps<typeof ReactSyntaxHighlighter>;
+
+export class SyntaxHighlighter extends Component<
+  SyntaxHighlighterProps & ReactSyntaxHighlighterProps,
+  SyntaxHighlighterState
 > {
-  static defaultProps: CopyableCodeProps = {
+  static defaultProps: SyntaxHighlighterProps = {
     language: null,
     copyable: false,
     bordered: false,
@@ -159,7 +161,7 @@ export default class CopyableCode extends Component<
     return children ? (
       <Wrapper bordered={bordered} padded={padded} className={className}>
         <Scroller>
-          <SyntaxHighlighter
+          <ReactSyntaxHighlighter
             padded={padded || bordered}
             language={language}
             useInlineStyles={false}
@@ -171,7 +173,7 @@ export default class CopyableCode extends Component<
             {format
               ? this.formatCode(language, (children as string).trim())
               : (children as string).trim()}
-          </SyntaxHighlighter>
+          </ReactSyntaxHighlighter>
         </Scroller>
         {copyable ? (
           <ActionBar actionItems={[{ title: copied ? 'Copied' : 'Copy', onClick: this.onClick }]} />

lib/components/src/tooltip/ListItem.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import ListItem from './ListItem';
 
-import Icons from '../icon/icon';
+import { Icons } from '../icon/icon';
 
 storiesOf('basics|Tooltip/ListItem', module)
   .add('all', () => (

lib/components/src/tooltip/Tooltip.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { styled } from '@storybook/theming';
-import Tooltip from './Tooltip';
+import { Tooltip } from './Tooltip';
 
 // Popper would position the tooltip absolutely. We just need to make sure we are pos:rel
 const mockPopperProps = { style: { position: 'relative', top: '20px', left: '20px' } };

lib/components/src/tooltip/Tooltip.tsx

@@ -119,7 +119,7 @@ export interface TooltipProps {
   color?: keyof Color;
 }
 
-const Tooltip: FunctionComponent<TooltipProps> = ({
+export const Tooltip: FunctionComponent<TooltipProps> = ({
   placement,
   hasChrome,
   children,
@@ -145,5 +145,3 @@ Tooltip.defaultProps = {
   placement: 'top',
   arrowProps: {},
 };
-
-export default Tooltip;

lib/components/src/tooltip/TooltipLinkList.stories.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import WithToolTip from './WithTooltip';
+import { WithTooltip } from './WithTooltip';
 
-import TooltipLinkList from './TooltipLinkList';
+import { TooltipLinkList } from './TooltipLinkList';
 import StoryLinkWrapper from '../StoryLinkWrapper';
 
 export const links = [
@@ -15,9 +15,9 @@ export const links = [
 storiesOf('basics/Tooltip/TooltipLinkList', module)
   .addDecorator(storyFn => (
     <div style={{ height: '300px' }}>
-      <WithToolTip placement="top" trigger="click" tooltipShown tooltip={storyFn()}>
+      <WithTooltip placement="top" trigger="click" tooltipShown tooltip={storyFn()}>
         <div>Tooltip</div>
-      </WithToolTip>
+      </WithTooltip>
     </div>
   ))
   .add('links', () => <TooltipLinkList links={links.slice(0, 2)} LinkWrapper={StoryLinkWrapper} />)

lib/components/src/tooltip/TooltipLinkList.tsx

@@ -27,7 +27,10 @@ export interface TooltipLinkListProps {
   LinkWrapper?: LinkWrapperType;
 }
 
-const TooltipLinkList: FunctionComponent<TooltipLinkListProps> = ({ links, LinkWrapper }) => (
+export const TooltipLinkList: FunctionComponent<TooltipLinkListProps> = ({
+  links,
+  LinkWrapper,
+}) => (
   <List>
     {links.map(({ id, title, href, onClick, active, isGatsby, ...props }) => (
       <ListItem
@@ -46,5 +49,3 @@ const TooltipLinkList: FunctionComponent<TooltipLinkListProps> = ({ links, LinkW
 TooltipLinkList.defaultProps = {
   LinkWrapper: ListItem.defaultProps.LinkWrapper,
 };
-
-export default TooltipLinkList;

lib/components/src/tooltip/TooltipMessage.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import WithTooltip from './WithTooltip';
+import {WithTooltip} from './WithTooltip';
 
-import TooltipMessage from './TooltipMessage';
+import { TooltipMessage } from './TooltipMessage';
 
 storiesOf('basics/Tooltip/TooltipMessage', module)
   .addDecorator(storyFn => (

lib/components/src/tooltip/TooltipMessage.tsx

@@ -1,8 +1,7 @@
 import React, { FunctionComponent, ReactNode } from 'react';
-import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';
 
-import Link from '../typography/link/link';
+import { Link } from '../typography/link/link';
 
 const Title = styled.div`
   font-weight: ${props => props.theme.typography.weight.black};
@@ -41,7 +40,7 @@ export interface TooltipMessageProps {
   }>;
 }
 
-const TooltipMessage: FunctionComponent<TooltipMessageProps> = ({ title, desc, links }) => {
+export const TooltipMessage: FunctionComponent<TooltipMessageProps> = ({ title, desc, links }) => {
   return (
     <MessageWrapper>
       <Message>
@@ -66,5 +65,3 @@ TooltipMessage.defaultProps = {
   desc: null,
   links: null,
 };
-
-export default TooltipMessage;

lib/components/src/tooltip/TooltipNote.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import WithTooltip from './WithTooltip';
+import { WithTooltip } from './WithTooltip';
 
-import TooltipNote from './TooltipNote';
+import { TooltipNote } from './TooltipNote';
 
 storiesOf('basics/Tooltip/TooltipNote', module)
   .addDecorator(storyFn => (

lib/components/src/tooltip/TooltipNote.tsx

@@ -1,5 +1,4 @@
 import React, { FunctionComponent } from 'react';
-import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';
 
 const Note = styled.div`
@@ -21,8 +20,6 @@ export interface TooltipNoteProps {
   note: string;
 }
 
-const TooltipNote: FunctionComponent<TooltipNoteProps> = ({ note }) => {
+export const TooltipNote: FunctionComponent<TooltipNoteProps> = ({ note }) => {
   return <Note>{note}</Note>;
 };
-
-export default TooltipNote;

lib/components/src/tooltip/WithTooltip.stories.tsx

@@ -2,7 +2,7 @@ import React, { FunctionComponent } from 'react';
 import { storiesOf } from '@storybook/react';
 import { styled } from '@storybook/theming';
 
-import TooltipMessage from './TooltipMessage';
+import { TooltipMessage } from './TooltipMessage';
 import { WithToolTipState as WithTooltip } from './WithTooltip';
 
 const ViewPort = styled.div`

lib/components/src/tooltip/WithTooltip.tsx

@@ -5,7 +5,7 @@ import { withState, lifecycle } from 'recompose';
 import { document } from 'global';
 
 import TooltipTrigger from 'react-popper-tooltip';
-import Tooltip from './Tooltip';
+import { Tooltip } from './Tooltip';
 import { Modifiers, Placement } from 'popper.js';
 
 // A target that doesn't speak popper
@@ -95,7 +95,7 @@ WithTooltipPure.defaultProps = {
   tooltipShown: false,
 };
 
-const WithTooltip = lifecycle<WithTooltipPureProps, {}>({
+export const WithTooltip = lifecycle<WithTooltipPureProps, {}>({
   componentDidMount() {
     const { onVisibilityChange } = this.props;
     const hide = () => onVisibilityChange(false);
@@ -143,8 +143,6 @@ const WithTooltip = lifecycle<WithTooltipPureProps, {}>({
   },
 })(WithTooltipPure);
 
-export default WithTooltip;
-
 const WithToolTipState: any = withState(
   'tooltipShown',
   'onVisibilityChange',

lib/components/src/typography/DocumentFormatting.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import Markdown from 'markdown-to-jsx';
-import DocumentFormatting from './DocumentFormatting';
+import { DocumentFormatting } from './DocumentFormatting';
 import markdownSample from './DocumentFormattingSample.md';
 
 export default {

lib/components/src/typography/DocumentFormatting.tsx

@@ -441,6 +441,4 @@ const Wrapper = styled.div(
   `
 );
 
-const StyledMarkdown = (props: any) => <Wrapper {...props} />;
-
-export default StyledMarkdown;
+export const DocumentFormatting = (props: any) => <Wrapper {...props} />;

lib/components/src/typography/link/link.stories.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import Link from './link';
-import Icons from '../../icon/icon';
+import {Link} from './link';
+import { Icons } from '../../icon/icon';
 
 const onClick = action('onClick');
 storiesOf('Basics|Link', module)

lib/components/src/typography/link/link.test.tsx

@@ -1,6 +1,6 @@
 import { shallow } from 'enzyme';
 import React from 'react';
-import Link from './link';
+import { Link } from './link';
 
 const LEFT_BUTTON = 0;
 const MIDDLE_BUTTON = 1;

lib/components/src/typography/link/link.tsx

@@ -2,7 +2,7 @@ import React, { AnchorHTMLAttributes, FunctionComponent } from 'react';
 import { styled, css, Theme } from '@storybook/theming';
 import { darken } from 'polished';
 
-import Icons from '../../icon/icon';
+import { Icons } from '../../icon/icon';
 
 // Cmd/Ctrl/Shift/Alt + Click should trigger default browser behaviour. Same applies to non-left clicks
 const LEFT_BUTTON = 0;
@@ -186,7 +186,15 @@ const A = styled.a<AProps>`
   ${linkStyles};
 `;
 
-const Link: FunctionComponent<LinkProps & AProps> = ({
+interface LinkProps extends LinkInnerProps, LinkStylesProps {
+  cancel?: boolean;
+  className?: string;
+  style?: object;
+  onClick?: (e: React.MouseEvent) => void;
+  href?: string;
+}
+
+export const Link: FunctionComponent<LinkProps & AProps> = ({
   cancel,
   children,
   onClick,
@@ -205,14 +213,6 @@ const Link: FunctionComponent<LinkProps & AProps> = ({
   );
 };
 
-interface LinkProps extends LinkInnerProps, LinkStylesProps {
-  cancel?: boolean;
-  className?: string;
-  style?: object;
-  onClick?: (e: React.MouseEvent) => void;
-  href?: string;
-}
-
 Link.defaultProps = {
   cancel: true,
   className: undefined,
@@ -221,5 +221,3 @@ Link.defaultProps = {
   withArrow: false,
   containsIcon: false,
 };
-
-export default Link;