From 30355562b2601f319a6c07a16fc1be2eb2341eac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Maisse?= <gmaisse@leadformance.com>
Date: Tue, 16 Apr 2019 13:42:36 +0200
Subject: [PATCH 1/6] chore: fix cyclic dependency in devDependencies of
 @storybook/components

Remove `@storybook/react` and `@storybook/addon-actions` from devDependencies of `@storybook/components` to avoid lerna to find cyclic dependency.
Also add them to ts-lint no-implicit-dependencies whitelist to avoid tslint error.

For more details about this see:https://github.com/storybooks/storybook/issues/6523
---
 lib/components/package.json  | 2 --
 lib/components/tsconfig.json | 3 ++-
 tslint.json                  | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/lib/components/package.json b/lib/components/package.json
index aae563d02345..4281ccaf8f4c 100644
--- a/lib/components/package.json
+++ b/lib/components/package.json
@@ -45,8 +45,6 @@
     "simplebar-react": "^0.1.5"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "5.1.0-alpha.28",
-    "@storybook/react": "5.1.0-alpha.28",
     "@types/js-beautify": "^1.8.0",
     "@types/react-syntax-highlighter": "^10.1.0",
     "@types/react-textarea-autosize": "^4.3.3",
diff --git a/lib/components/tsconfig.json b/lib/components/tsconfig.json
index 31dedcc1d8c5..088e0f247933 100644
--- a/lib/components/tsconfig.json
+++ b/lib/components/tsconfig.json
@@ -12,6 +12,7 @@
     "src/**/*"
   ],
   "exclude": [
-    "src/**/__tests__/**/*"
+    "src/**/__tests__/**/*",
+    "src/**/*.stories.*"
   ]
 }
diff --git a/tslint.json b/tslint.json
index be2adec3353f..9be0bbebb26d 100644
--- a/tslint.json
+++ b/tslint.json
@@ -55,7 +55,7 @@
     "prefer-const": false,
     "quotemark": false,
     "radix": true,
-    "no-implicit-dependencies": [true, "dev"],
+    "no-implicit-dependencies": [true, "dev", ["@storybook/react", "@storybook/addon-actions"]],
     "triple-equals": [true, "allow-null-check"],
     "unified-signatures": true,
     "variable-name": false,

From 6b86dee847d678c7773427ef20938f6a0da292e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Maisse?= <gmaisse@leadformance.com>
Date: Fri, 12 Apr 2019 14:47:46 +0200
Subject: [PATCH 2/6] refactor: improve typings in `storybook/components`

---
 lib/components/src/tooltip/TooltipLinkList.tsx | 6 +++---
 lib/components/src/tooltip/WithTooltip.tsx     | 1 +
 lib/components/src/typography/link/link.tsx    | 8 +++-----
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/lib/components/src/tooltip/TooltipLinkList.tsx b/lib/components/src/tooltip/TooltipLinkList.tsx
index 792fea78eb34..8d181b5aa47d 100644
--- a/lib/components/src/tooltip/TooltipLinkList.tsx
+++ b/lib/components/src/tooltip/TooltipLinkList.tsx
@@ -24,14 +24,14 @@ export interface Link {
 
 export interface TooltipLinkListProps {
   links: Link[];
-  LinkWrapper: LinkWrapperType;
+  LinkWrapper?: LinkWrapperType;
 }
 
 const TooltipLinkList: FunctionComponent<TooltipLinkListProps> = ({ links, LinkWrapper }) => (
   <List>
-    {links.map(({ id, title, href, onClick, active, isGatsby, ...props }: any) => (
+    {links.map(({ id, title, href, onClick, active, isGatsby, ...props }) => (
       <ListItem
-        key={id || title}
+        key={id || (title as string)}
         title={title}
         onClick={onClick}
         active={active}
diff --git a/lib/components/src/tooltip/WithTooltip.tsx b/lib/components/src/tooltip/WithTooltip.tsx
index cbab1c7ebe05..1110145bbbe2 100644
--- a/lib/components/src/tooltip/WithTooltip.tsx
+++ b/lib/components/src/tooltip/WithTooltip.tsx
@@ -29,6 +29,7 @@ interface WithTooltipPureProps {
   children: ReactNode;
   tooltipShown?: boolean;
   onVisibilityChange?: (visibility: boolean) => void;
+  onDoubleClick?: () => void;
 }
 
 // Pure, does not bind to the body
diff --git a/lib/components/src/typography/link/link.tsx b/lib/components/src/typography/link/link.tsx
index 3deee81693ec..dda577d5a3ab 100644
--- a/lib/components/src/typography/link/link.tsx
+++ b/lib/components/src/typography/link/link.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import React, { AnchorHTMLAttributes, FunctionComponent } from 'react';
 import { styled, css, Theme } from '@storybook/theming';
 import { darken } from 'polished';
 
@@ -180,15 +180,13 @@ const LinkInner = styled.span`
     `};
 `;
 
-interface AProps {
-  href?: string;
-}
+type AProps = AnchorHTMLAttributes<HTMLAnchorElement>;
 
 const A = styled.a<AProps>`
   ${linkStyles};
 `;
 
-const Link: FunctionComponent<LinkProps> = ({
+const Link: FunctionComponent<LinkProps & AProps> = ({
   cancel,
   children,
   onClick,

From 223183cb74ce895164f5b7d02ab9bc27f0a9ebd7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Maisse?= <gmaisse@leadformance.com>
Date: Fri, 12 Apr 2019 14:50:14 +0200
Subject: [PATCH 3/6] refactor: remove `@storybook/components` module
 declaration in addons

As `@storybook/components` is now in TS (and so export its types) there is no more need to declare it in `typings.d.ts` of addons written in TS
---
 addons/a11y/src/typings.d.ts         | 2 --
 addons/actions/src/typings.d.ts      | 1 -
 addons/backgrounds/src/typings.d.ts  | 2 --
 addons/cssresources/src/typings.d.ts | 1 -
 addons/jest/src/typings.d.ts         | 2 --
 addons/notes/src/typings.d.ts        | 3 ---
 6 files changed, 11 deletions(-)
 delete mode 100644 addons/backgrounds/src/typings.d.ts

diff --git a/addons/a11y/src/typings.d.ts b/addons/a11y/src/typings.d.ts
index 1cebcd2c971a..2f4eb9cf4fd9 100644
--- a/addons/a11y/src/typings.d.ts
+++ b/addons/a11y/src/typings.d.ts
@@ -1,3 +1 @@
-// TODO: following packages need definition files or a TS migration
-declare module '@storybook/components';
 declare module 'global';
diff --git a/addons/actions/src/typings.d.ts b/addons/actions/src/typings.d.ts
index 71fa74c16e2a..5d85a4ae4c0a 100644
--- a/addons/actions/src/typings.d.ts
+++ b/addons/actions/src/typings.d.ts
@@ -1,4 +1,3 @@
 // TODO: following packages need definition files or a TS migration
-declare module '@storybook/components';
 declare module 'global';
 declare module 'react-inspector';
diff --git a/addons/backgrounds/src/typings.d.ts b/addons/backgrounds/src/typings.d.ts
deleted file mode 100644
index 0ca9d4552932..000000000000
--- a/addons/backgrounds/src/typings.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// TODO: following packages need definition files or a TS migration
-declare module '@storybook/components';
diff --git a/addons/cssresources/src/typings.d.ts b/addons/cssresources/src/typings.d.ts
index 1cebcd2c971a..a41bf8a45b79 100644
--- a/addons/cssresources/src/typings.d.ts
+++ b/addons/cssresources/src/typings.d.ts
@@ -1,3 +1,2 @@
 // TODO: following packages need definition files or a TS migration
-declare module '@storybook/components';
 declare module 'global';
diff --git a/addons/jest/src/typings.d.ts b/addons/jest/src/typings.d.ts
index 04c872d49586..a41bf8a45b79 100644
--- a/addons/jest/src/typings.d.ts
+++ b/addons/jest/src/typings.d.ts
@@ -1,4 +1,2 @@
 // TODO: following packages need definition files or a TS migration
-
 declare module 'global';
-declare module '@storybook/components';
diff --git a/addons/notes/src/typings.d.ts b/addons/notes/src/typings.d.ts
index 75c8db941995..b05c2516a214 100644
--- a/addons/notes/src/typings.d.ts
+++ b/addons/notes/src/typings.d.ts
@@ -1,6 +1,3 @@
-// todo the following packages need definition files or a TS migration
-declare module '@storybook/components';
-
 // There are no types for markdown-to-jsx
 declare module 'markdown-to-jsx' {
   const Markdown: any;

From 0e95d62f76b5f7fc8f347692333463b3c317bfc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Maisse?= <gmaisse@leadformance.com>
Date: Fri, 12 Apr 2019 16:01:23 +0200
Subject: [PATCH 4/6] chore: use named import/export instead of default ones in
 sb/components

Named exports enables better IDE integration and simplify a lot code refactoring
---
 .../__snapshots__/A11YPanel.test.js.snap      |  8 +++----
 lib/components/src/Badge/Badge.stories.tsx    |  2 +-
 lib/components/src/Badge/Badge.tsx            |  4 +---
 lib/components/src/Button/Button.stories.tsx  | 12 +++++-----
 lib/components/src/Button/Button.tsx          |  4 +---
 lib/components/src/form/field/field.tsx       |  4 +---
 lib/components/src/form/form.stories.tsx      |  2 +-
 lib/components/src/form/index.tsx             |  6 ++---
 lib/components/src/form/input/input.tsx       |  2 +-
 lib/components/src/icon/icon.stories.tsx      |  8 +++----
 lib/components/src/icon/icon.tsx              |  6 ++---
 lib/components/src/icon/icons.tsx             |  2 +-
 lib/components/src/index.ts                   | 22 +++++++++----------
 .../src/placeholder/placeholder.stories.tsx   |  2 +-
 .../syntaxhighlighter.stories.tsx             |  2 +-
 .../syntaxhighlighter/syntaxhighlighter.tsx   | 20 +++++++++--------
 .../src/tooltip/ListItem.stories.tsx          |  2 +-
 .../src/tooltip/Tooltip.stories.tsx           |  2 +-
 lib/components/src/tooltip/Tooltip.tsx        |  4 +---
 .../src/tooltip/TooltipLinkList.stories.tsx   |  8 +++----
 .../src/tooltip/TooltipLinkList.tsx           |  7 +++---
 .../src/tooltip/TooltipMessage.stories.tsx    |  4 ++--
 lib/components/src/tooltip/TooltipMessage.tsx |  7 ++----
 .../src/tooltip/TooltipNote.stories.tsx       |  4 ++--
 lib/components/src/tooltip/TooltipNote.tsx    |  5 +----
 .../src/tooltip/WithTooltip.stories.tsx       |  2 +-
 lib/components/src/tooltip/WithTooltip.tsx    |  6 ++---
 .../typography/DocumentFormatting.stories.tsx |  2 +-
 .../src/typography/DocumentFormatting.tsx     |  4 +---
 .../src/typography/link/link.stories.tsx      |  4 ++--
 .../src/typography/link/link.test.tsx         |  2 +-
 lib/components/src/typography/link/link.tsx   | 22 +++++++++----------
 32 files changed, 85 insertions(+), 106 deletions(-)

diff --git a/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap b/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
index d791b9056b45..b7d67a158fe8 100644
--- a/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
+++ b/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>
diff --git a/lib/components/src/Badge/Badge.stories.tsx b/lib/components/src/Badge/Badge.stories.tsx
index 3299d4004c34..c98533de1300 100644
--- a/lib/components/src/Badge/Badge.stories.tsx
+++ b/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>
diff --git a/lib/components/src/Badge/Badge.tsx b/lib/components/src/Badge/Badge.tsx
index c78410823082..93b89a9b0b9d 100644
--- a/lib/components/src/Badge/Badge.tsx
+++ b/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;
diff --git a/lib/components/src/Button/Button.stories.tsx b/lib/components/src/Button/Button.stories.tsx
index cff92c4dec8c..cb3699a3dd45 100644
--- a/lib/components/src/Button/Button.stories.tsx
+++ b/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>
diff --git a/lib/components/src/Button/Button.tsx b/lib/components/src/Button/Button.tsx
index aab57b088385..3fc6ba6909e7 100644
--- a/lib/components/src/Button/Button.tsx
+++ b/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;
diff --git a/lib/components/src/form/field/field.tsx b/lib/components/src/form/field/field.tsx
index 9b25d39c55f1..58cd8682c339 100644
--- a/lib/components/src/form/field/field.tsx
+++ b/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;
diff --git a/lib/components/src/form/form.stories.tsx b/lib/components/src/form/form.stories.tsx
index 66f4643e1d3f..27051835137c 100644
--- a/lib/components/src/form/form.stories.tsx
+++ b/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' });
diff --git a/lib/components/src/form/index.tsx b/lib/components/src/form/index.tsx
index b2386daece24..587a3abd0f2e 100644
--- a/lib/components/src/form/index.tsx
+++ b/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;
diff --git a/lib/components/src/form/input/input.tsx b/lib/components/src/form/input/input.tsx
index fa90c674fc39..fc3000651b60 100644
--- a/lib/components/src/form/input/input.tsx
+++ b/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
diff --git a/lib/components/src/icon/icon.stories.tsx b/lib/components/src/icon/icon.stories.tsx
index 6f9793fc3497..961fc7b8739f 100644
--- a/lib/components/src/icon/icon.stories.tsx
+++ b/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>
diff --git a/lib/components/src/icon/icon.tsx b/lib/components/src/icon/icon.tsx
index 77f68855218e..fc8f1b1a0202 100644
--- a/lib/components/src/icon/icon.tsx
+++ b/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;
diff --git a/lib/components/src/icon/icons.tsx b/lib/components/src/icon/icons.tsx
index 2fd80118afc4..1f8a25a2383e 100644
--- a/lib/components/src/icon/icons.tsx
+++ b/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:
diff --git a/lib/components/src/index.ts b/lib/components/src/index.ts
index d42b43892d53..26733164ef03 100644
--- a/lib/components/src/index.ts
+++ b/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';
diff --git a/lib/components/src/placeholder/placeholder.stories.tsx b/lib/components/src/placeholder/placeholder.stories.tsx
index 27cbdfab21bd..7994dbe11e74 100644
--- a/lib/components/src/placeholder/placeholder.stories.tsx
+++ b/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,
diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx b/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
index 96a0c060afae..7e3e32e4d1c1 100644
--- a/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
+++ b/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', () => (
diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx b/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
index ffbb4ea3fe1a..31e93a934f8b 100644
--- a/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
+++ b/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 }]} />
diff --git a/lib/components/src/tooltip/ListItem.stories.tsx b/lib/components/src/tooltip/ListItem.stories.tsx
index c8f189ee8d52..5f74f1d34744 100644
--- a/lib/components/src/tooltip/ListItem.stories.tsx
+++ b/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', () => (
diff --git a/lib/components/src/tooltip/Tooltip.stories.tsx b/lib/components/src/tooltip/Tooltip.stories.tsx
index 8322d2216198..99cec614ec69 100644
--- a/lib/components/src/tooltip/Tooltip.stories.tsx
+++ b/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' } };
diff --git a/lib/components/src/tooltip/Tooltip.tsx b/lib/components/src/tooltip/Tooltip.tsx
index c9b2b82d1415..d826789ab994 100644
--- a/lib/components/src/tooltip/Tooltip.tsx
+++ b/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;
diff --git a/lib/components/src/tooltip/TooltipLinkList.stories.tsx b/lib/components/src/tooltip/TooltipLinkList.stories.tsx
index c9c5c5f0c75c..bfa9f629c7e4 100644
--- a/lib/components/src/tooltip/TooltipLinkList.stories.tsx
+++ b/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} />)
diff --git a/lib/components/src/tooltip/TooltipLinkList.tsx b/lib/components/src/tooltip/TooltipLinkList.tsx
index 8d181b5aa47d..497008732574 100644
--- a/lib/components/src/tooltip/TooltipLinkList.tsx
+++ b/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;
diff --git a/lib/components/src/tooltip/TooltipMessage.stories.tsx b/lib/components/src/tooltip/TooltipMessage.stories.tsx
index 975efcb32978..27a390e97ad4 100644
--- a/lib/components/src/tooltip/TooltipMessage.stories.tsx
+++ b/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 => (
diff --git a/lib/components/src/tooltip/TooltipMessage.tsx b/lib/components/src/tooltip/TooltipMessage.tsx
index 91a87ee7264d..54106e7bbed8 100644
--- a/lib/components/src/tooltip/TooltipMessage.tsx
+++ b/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;
diff --git a/lib/components/src/tooltip/TooltipNote.stories.tsx b/lib/components/src/tooltip/TooltipNote.stories.tsx
index 0e678e2bb850..ffc5796342f4 100644
--- a/lib/components/src/tooltip/TooltipNote.stories.tsx
+++ b/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 => (
diff --git a/lib/components/src/tooltip/TooltipNote.tsx b/lib/components/src/tooltip/TooltipNote.tsx
index c32520d39c78..be91c2f4bb8e 100644
--- a/lib/components/src/tooltip/TooltipNote.tsx
+++ b/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;
diff --git a/lib/components/src/tooltip/WithTooltip.stories.tsx b/lib/components/src/tooltip/WithTooltip.stories.tsx
index 5cf4c974cd27..eb1b05ca1b3a 100644
--- a/lib/components/src/tooltip/WithTooltip.stories.tsx
+++ b/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`
diff --git a/lib/components/src/tooltip/WithTooltip.tsx b/lib/components/src/tooltip/WithTooltip.tsx
index 1110145bbbe2..0c8a74359878 100644
--- a/lib/components/src/tooltip/WithTooltip.tsx
+++ b/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',
diff --git a/lib/components/src/typography/DocumentFormatting.stories.tsx b/lib/components/src/typography/DocumentFormatting.stories.tsx
index 1ed5142e56f2..16430f841786 100644
--- a/lib/components/src/typography/DocumentFormatting.stories.tsx
+++ b/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 {
diff --git a/lib/components/src/typography/DocumentFormatting.tsx b/lib/components/src/typography/DocumentFormatting.tsx
index 21e9c8cd8852..c1c9afa0ff94 100644
--- a/lib/components/src/typography/DocumentFormatting.tsx
+++ b/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} />;
diff --git a/lib/components/src/typography/link/link.stories.tsx b/lib/components/src/typography/link/link.stories.tsx
index fed98a2f4438..cfece09f8b89 100644
--- a/lib/components/src/typography/link/link.stories.tsx
+++ b/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)
diff --git a/lib/components/src/typography/link/link.test.tsx b/lib/components/src/typography/link/link.test.tsx
index cf3898508424..d2e2f54aa1a8 100644
--- a/lib/components/src/typography/link/link.test.tsx
+++ b/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;
diff --git a/lib/components/src/typography/link/link.tsx b/lib/components/src/typography/link/link.tsx
index dda577d5a3ab..811fe7f99f15 100644
--- a/lib/components/src/typography/link/link.tsx
+++ b/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;

From 1d4e8a6e40d190fd600d070599b31eb8c4a2aa1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Maisse?= <gmaisse@leadformance.com>
Date: Mon, 15 Apr 2019 16:45:42 +0200
Subject: [PATCH 5/6] chore: remove some unused dependencies in
 `@storybook/components`

---
 lib/components/package.json | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/lib/components/package.json b/lib/components/package.json
index 4281ccaf8f4c..302feaad363b 100644
--- a/lib/components/package.json
+++ b/lib/components/package.json
@@ -21,10 +21,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.28",
     "@storybook/client-logger": "5.1.0-alpha.28",
-    "@storybook/core-events": "5.1.0-alpha.28",
-    "@storybook/router": "5.1.0-alpha.28",
     "@storybook/theming": "5.1.0-alpha.28",
     "core-js": "^2.6.5",
     "global": "^4.3.2",

From bb78d74e25894080f4ca4c9dab05547df32f4aad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Maisse?= <gmaisse@leadformance.com>
Date: Tue, 16 Apr 2019 13:48:54 +0200
Subject: [PATCH 6/6] refactor: fix ts-lint warnings

---
 lib/components/src/tooltip/TooltipMessage.stories.tsx | 2 +-
 lib/components/src/typography/link/link.stories.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/components/src/tooltip/TooltipMessage.stories.tsx b/lib/components/src/tooltip/TooltipMessage.stories.tsx
index 27a390e97ad4..c7fd4efa3dca 100644
--- a/lib/components/src/tooltip/TooltipMessage.stories.tsx
+++ b/lib/components/src/tooltip/TooltipMessage.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import {WithTooltip} from './WithTooltip';
+import { WithTooltip } from './WithTooltip';
 
 import { TooltipMessage } from './TooltipMessage';
 
diff --git a/lib/components/src/typography/link/link.stories.tsx b/lib/components/src/typography/link/link.stories.tsx
index cfece09f8b89..a4071cffff7a 100644
--- a/lib/components/src/typography/link/link.stories.tsx
+++ b/lib/components/src/typography/link/link.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import {Link} from './link';
+import { Link } from './link';
 import { Icons } from '../../icon/icon';
 
 const onClick = action('onClick');