diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js
index 463772a60e7e..dcc4a87dde88 100644
--- a/examples/official-storybook/config.js
+++ b/examples/official-storybook/config.js
@@ -121,7 +121,7 @@ function loadStories() {
   req = require.context('../../lib/ui/src', true, /\.stories\.js$/);
   importAll(req);
 
-  req = require.context('../../lib/components/src', true, /\.stories\.js$/);
+  req = require.context('../../lib/components/src', true, /\.stories\.tsx?$/);
   importAll(req);
 
   req = require.context('./stories', true, /\.stories\.js$/);
diff --git a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
index cd7d301aba36..cd315eb7322c 100644
--- a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
+++ b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
@@ -247,6 +247,9 @@ exports[`Storyshots Basics|Brand/StorybookLogo normal 1`] = `
   viewBox="0 0 200 40"
   width="200px"
 >
+  <title>
+    Storybook logo
+  </title>
   <defs>
     <path
       d="M1.2 36.9L0 3.9c0-1.1.8-2 1.9-2.1l28-1.8a2 2 0 0 1 2.2 1.9 2 2 0 0 1 0 .1v36a2 2 0 0 1-2 2 2 2 0 0 1-.1 0L3.2 38.8a2 2 0 0 1-2-2z"
@@ -7470,6 +7473,7 @@ exports[`Storyshots UI|Sidebar/ListItemIcon all 1`] = `
 
 .emotion-3 {
   color: #333333;
+  font-weight: 400;
 }
 
 .emotion-6 {
@@ -7557,6 +7561,7 @@ exports[`Storyshots UI|Sidebar/ListItemIcon all 1`] = `
 
 .emotion-3 {
   color: #333333;
+  font-weight: 400;
 }
 
 .emotion-6 {
@@ -8401,7 +8406,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
                     class="emotion-0"
                     height="40px"
                     role="img"
-                    title="Storybook"
                     viewBox="0 0 200 40"
                     width="200px"
                   >
@@ -9834,7 +9838,6 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
                     class="emotion-0"
                     height="40px"
                     role="img"
-                    title="Storybook"
                     viewBox="0 0 200 40"
                     width="200px"
                   >
@@ -11352,7 +11355,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading menuHighlighted 1`] = `
           class="emotion-0"
           height="40px"
           role="img"
-          title="Storybook"
           viewBox="0 0 200 40"
           width="200px"
         >
@@ -11993,7 +11995,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading standard 1`] = `
           class="emotion-0"
           height="40px"
           role="img"
-          title="Storybook"
           viewBox="0 0 200 40"
           width="200px"
         >
@@ -12331,7 +12332,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading standardNoLink 1`] = `
         class="emotion-0"
         height="40px"
         role="img"
-        title="Storybook"
         viewBox="0 0 200 40"
         width="200px"
       >
diff --git a/lib/components/package.json b/lib/components/package.json
index 3e45c7edbac9..c576a7d654bd 100644
--- a/lib/components/package.json
+++ b/lib/components/package.json
@@ -16,7 +16,7 @@
   },
   "license": "MIT",
   "main": "dist/index.js",
-  "jsnext:main": "src/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
@@ -29,7 +29,9 @@
     "core-js": "^2.6.5",
     "global": "^4.3.2",
     "js-beautify": "^1.8.9",
+    "markdown-to-jsx": "^6.9.1",
     "memoizerific": "^1.11.3",
+    "popper.js": "^1.14.7",
     "polished": "^3.0.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.4",
@@ -42,6 +44,17 @@
     "recompose": "^0.30.0",
     "simplebar-react": "^0.1.5"
   },
+  "devDependencies": {
+    "@storybook/addon-actions": "5.1.0-alpha.22",
+    "@storybook/react": "5.1.0-alpha.22",
+    "@types/js-beautify": "^1.8.0",
+    "@types/react-syntax-highlighter": "^10.1.0",
+    "@types/react-textarea-autosize": "^4.3.3",
+    "@types/recompose": "^0.30.5",
+    "enzyme": "^3.9.0",
+    "jest": "^24.7.1",
+    "jest-enzyme": "^7.0.2"
+  },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
diff --git a/lib/components/src/ActionBar/ActionBar.stories.js b/lib/components/src/ActionBar/ActionBar.stories.tsx
similarity index 88%
rename from lib/components/src/ActionBar/ActionBar.stories.js
rename to lib/components/src/ActionBar/ActionBar.stories.tsx
index 33cfaface8ff..b620bd370dfb 100644
--- a/lib/components/src/ActionBar/ActionBar.stories.js
+++ b/lib/components/src/ActionBar/ActionBar.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { action } from '@storybook/addon-actions';
 
 import { ActionBar } from './ActionBar';
@@ -11,7 +11,7 @@ export default {
   Component: ActionBar,
   title: 'Basics|ActionBar',
   decorators: [
-    storyFn => (
+    (storyFn: () => ReactNode) => (
       <div
         style={{
           position: 'relative',
@@ -28,7 +28,7 @@ export default {
   ],
 };
 
-export const singleItem = () => <ActionBar actionItems={[{ title: 'Clear', onClick: action1 }]} />;
+export const singleItem = () => <ActionBar actionItems={[{ title: 'Clear', onClick: action1 }]}/>;
 
 export const manyItems = () => (
   <ActionBar
diff --git a/lib/components/src/ActionBar/ActionBar.js b/lib/components/src/ActionBar/ActionBar.tsx
similarity index 69%
rename from lib/components/src/ActionBar/ActionBar.js
rename to lib/components/src/ActionBar/ActionBar.tsx
index ffeb742da134..cbb3a084f24a 100644
--- a/lib/components/src/ActionBar/ActionBar.js
+++ b/lib/components/src/ActionBar/ActionBar.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent } from 'react';
 
 import { styled } from '@storybook/theming';
 
@@ -45,25 +44,21 @@ export const ActionButton = styled.button(({ theme }) => ({
 }));
 ActionButton.displayName = 'ActionButton';
 
-export const ActionBar = ({ actionItems, ...props }) => (
+export interface ActionItem {
+  title: string | JSX.Element;
+  onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+
+export interface ActionBarProps {
+  actionItems: ActionItem[];
+}
+
+export const ActionBar: FunctionComponent<ActionBarProps> = ({ actionItems, ...props }) => (
   <Container {...props}>
-    {actionItems.map(({ title, onClick }, index) => (
-      <ActionButton
-        // eslint-disable-next-line react/no-array-index-key
-        key={index}
-        onClick={onClick}
-      >
+    {actionItems.map(({ title, onClick }, index: number) => (
+      <ActionButton key={index} onClick={onClick}>
         {title}
       </ActionButton>
     ))}
   </Container>
 );
-
-ActionBar.propTypes = {
-  actionItems: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.node.isRequired,
-      onClick: PropTypes.func.isRequired,
-    })
-  ).isRequired,
-};
diff --git a/lib/components/src/Badge/Badge.stories.js b/lib/components/src/Badge/Badge.stories.tsx
similarity index 100%
rename from lib/components/src/Badge/Badge.stories.js
rename to lib/components/src/Badge/Badge.stories.tsx
diff --git a/lib/components/src/Badge/Badge.js b/lib/components/src/Badge/Badge.tsx
similarity index 76%
rename from lib/components/src/Badge/Badge.js
rename to lib/components/src/Badge/Badge.tsx
index fe3ee497e222..c78410823082 100644
--- a/lib/components/src/Badge/Badge.js
+++ b/lib/components/src/Badge/Badge.tsx
@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import { styled, css } from '@storybook/theming';
 
-const BadgeWrapper = styled.div`
+type BadgeWrapperProps = BadgeProps;
+
+const BadgeWrapper = styled.div<BadgeWrapperProps>`
   display: inline-block;
   vertical-align: top;
   font-size: 11px;
@@ -43,8 +45,12 @@ const BadgeWrapper = styled.div`
     `};
 `;
 
-function Badge({ ...props }) {
-  return <BadgeWrapper {...props} />;
+export interface BadgeProps {
+  status: 'positive' | 'negative' | 'neutral';
 }
 
+const Badge: FunctionComponent<BadgeProps> = ({ ...props }) => {
+  return <BadgeWrapper {...props} />;
+};
+
 export default Badge;
diff --git a/lib/components/src/Button/Button.stories.js b/lib/components/src/Button/Button.stories.tsx
similarity index 100%
rename from lib/components/src/Button/Button.stories.js
rename to lib/components/src/Button/Button.stories.tsx
diff --git a/lib/components/src/Button/Button.js b/lib/components/src/Button/Button.tsx
similarity index 93%
rename from lib/components/src/Button/Button.js
rename to lib/components/src/Button/Button.tsx
index 38e2fe95662f..aab57b088385 100644
--- a/lib/components/src/Button/Button.js
+++ b/lib/components/src/Button/Button.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent } from 'react';
 import { styled, css } from '@storybook/theming';
 import { darken, lighten, rgba, transparentize } from 'polished';
 
-const ButtonWrapper = styled.button`
+type ButtonWrapperProps = ButtonProps;
+
+const ButtonWrapper = styled.button<ButtonWrapperProps>`
   border: 0;
   border-radius: 3em;
   cursor: pointer;
@@ -220,16 +221,23 @@ const ButtonWrapper = styled.button`
 
 const ButtonLink = ButtonWrapper.withComponent('a');
 
-function Button({ isLink, children, ...props }) {
+interface ButtonProps {
+  isLink?: boolean;
+  primary?: boolean;
+  secondary?: boolean;
+  tertiary?: boolean;
+  inForm?: boolean;
+  disabled?: boolean;
+  small?: boolean;
+  outline?: boolean;
+  containsIcon?: boolean;
+}
+
+const Button: FunctionComponent<ButtonProps> = ({ isLink, children, ...props }) => {
   if (isLink) {
     return <ButtonLink {...props}>{children}</ButtonLink>;
   }
   return <ButtonWrapper {...props}>{children}</ButtonWrapper>;
-}
-
-Button.propTypes = {
-  isLink: PropTypes.bool,
-  children: PropTypes.node.isRequired,
 };
 
 Button.defaultProps = {
diff --git a/lib/components/src/ScrollArea/ScrollArea.stories.js b/lib/components/src/ScrollArea/ScrollArea.stories.tsx
similarity index 82%
rename from lib/components/src/ScrollArea/ScrollArea.stories.js
rename to lib/components/src/ScrollArea/ScrollArea.stories.tsx
index 811716a8d80c..a432d443d7c1 100644
--- a/lib/components/src/ScrollArea/ScrollArea.stories.js
+++ b/lib/components/src/ScrollArea/ScrollArea.stories.tsx
@@ -22,12 +22,20 @@ const Wrapper = styled.div({
   overflow: 'hidden',
 });
 
-const list = filler => [...new Array(20)].map((x, i) => filler(i));
+const list = (filler: (data: number) => JSX.Element) => {
+  const data = [];
+
+  for (let i = 0; i < 20; i++) {
+    data.push(filler(i));
+  }
+
+  return data;
+};
 
 export default {
   component: ScrollArea,
   title: 'Basics|ScrollArea',
-  decorators: [storyFn => <Wrapper>{storyFn()}</Wrapper>],
+  decorators: [(storyFn: () => any) => <Wrapper>{storyFn()}</Wrapper>],
 };
 
 export const vertical = () => (
diff --git a/lib/components/src/ScrollArea/ScrollArea.js b/lib/components/src/ScrollArea/ScrollArea.tsx
similarity index 63%
rename from lib/components/src/ScrollArea/ScrollArea.js
rename to lib/components/src/ScrollArea/ScrollArea.tsx
index cae9b2652f52..c95b5c6fffa7 100644
--- a/lib/components/src/ScrollArea/ScrollArea.js
+++ b/lib/components/src/ScrollArea/ScrollArea.tsx
@@ -1,14 +1,19 @@
 // Storybook's implementation of SimpleBar https://github.com/Grsmto/simplebar
 // Note: "SimpleBar can't be used on the <body>, <textarea> or <iframe> elements."
 
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
+import React, { Fragment, FunctionComponent } from 'react';
 import { styled, Global } from '@storybook/theming';
 
 import SimpleBar from 'simplebar-react';
 import { getScrollAreaStyles } from './ScrollAreaStyles';
 
-const Scroll = styled(({ vertical, horizontal, ...rest }) => <SimpleBar {...rest} />)(
+export interface ScrollProps {
+  horizontal?: boolean;
+  vertical?: boolean;
+  [key: string]: any;
+}
+
+const Scroll = styled(({ vertical, horizontal, ...rest }: ScrollProps) => <SimpleBar {...rest} />)(
   ({ vertical }) =>
     !vertical
       ? {
@@ -27,7 +32,18 @@ const Scroll = styled(({ vertical, horizontal, ...rest }) => <SimpleBar {...rest
         }
 );
 
-export const ScrollArea = ({ children, vertical, horizontal, ...props }) => (
+export interface ScrollAreaProps {
+  horizontal?: boolean;
+  vertical?: boolean;
+  className?: string;
+}
+
+export const ScrollArea: FunctionComponent<ScrollAreaProps> = ({
+  children,
+  vertical,
+  horizontal,
+  ...props
+}) => (
   <Fragment>
     <Global styles={getScrollAreaStyles} />
     <Scroll vertical={vertical} horizontal={horizontal} {...props}>
@@ -36,11 +52,6 @@ export const ScrollArea = ({ children, vertical, horizontal, ...props }) => (
   </Fragment>
 );
 
-ScrollArea.propTypes = {
-  children: PropTypes.node.isRequired,
-  horizontal: PropTypes.bool,
-  vertical: PropTypes.bool,
-};
 ScrollArea.defaultProps = {
   horizontal: false,
   vertical: false,
diff --git a/lib/components/src/ScrollArea/ScrollAreaStyles.js b/lib/components/src/ScrollArea/ScrollAreaStyles.tsx
similarity index 90%
rename from lib/components/src/ScrollArea/ScrollAreaStyles.js
rename to lib/components/src/ScrollArea/ScrollAreaStyles.tsx
index 1a3c284c71ac..33ea5986a4af 100644
--- a/lib/components/src/ScrollArea/ScrollAreaStyles.js
+++ b/lib/components/src/ScrollArea/ScrollAreaStyles.tsx
@@ -1,4 +1,6 @@
-export const getScrollAreaStyles = theme => ({
+import { Theme, Interpolation } from '@storybook/theming';
+
+export const getScrollAreaStyles: (theme: Theme) => Interpolation = (theme: Theme) => ({
   '[data-simplebar]': {
     position: 'relative',
     flexDirection: 'column',
@@ -36,9 +38,9 @@ export const getScrollAreaStyles = theme => ({
   },
 
   '.simplebar-offset': {
-    direction: 'inherit !important',
-    boxSizing: 'inherit !important',
-    resize: 'none !important',
+    direction: 'inherit !important' as 'inherit',
+    boxSizing: 'inherit !important' as 'inherit',
+    resize: 'none !important' as 'none',
     position: 'absolute',
     top: 0,
     left: 0,
@@ -51,7 +53,7 @@ export const getScrollAreaStyles = theme => ({
 
   '.simplebar-content': {
     direction: 'inherit',
-    boxSizing: 'border-box !important',
+    boxSizing: 'border-box !important' as 'border-box',
     position: 'relative',
     display: 'block',
     height:
@@ -71,7 +73,7 @@ export const getScrollAreaStyles = theme => ({
   },
 
   '.simplebar-height-auto-observer-wrapper': {
-    boxSizing: 'inherit !important',
+    boxSizing: 'inherit !important' as 'inherit',
     height: '100%',
     width: 'inherit',
     maxWidth: 1,
@@ -132,7 +134,7 @@ export const getScrollAreaStyles = theme => ({
 
   '.simplebar-track .simplebar-scrollbar.simplebar-visible:before': {
     /* When hovered, remove all transitions from drag handle */
-    opacity: '0.2',
+    opacity: 0.2,
     transition: 'opacity 0s linear',
   },
 
diff --git a/lib/components/src/StoryLinkWrapper.js b/lib/components/src/StoryLinkWrapper.ts
similarity index 53%
rename from lib/components/src/StoryLinkWrapper.js
rename to lib/components/src/StoryLinkWrapper.ts
index 8d2d37aaef50..1d5779cbf4cc 100644
--- a/lib/components/src/StoryLinkWrapper.js
+++ b/lib/components/src/StoryLinkWrapper.ts
@@ -1,29 +1,34 @@
 /* eslint-disable import/no-extraneous-dependencies */
 // This is allows us to test whether the link works via the actions addon
-import React, { Children } from 'react';
+import React, { Children, FunctionComponent, ReactElement, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { action } from '@storybook/addon-actions';
 
 const onLinkClick = action('onLinkClick');
 
-export default function StoryLinkWrapper({ href, passHref, children }) {
-  const child = Children.only(children);
+interface StoryLinkWrapperProps {
+  href: string;
+  passHref?: boolean;
+}
+
+const StoryLinkWrapper: FunctionComponent<StoryLinkWrapperProps> = ({
+  href,
+  passHref,
+  children,
+}) => {
+  const child = Children.only(children) as ReactElement;
 
   return React.cloneElement(child, {
     href: passHref && href,
-    onClick: e => {
+    onClick: (e: React.MouseEvent) => {
       e.preventDefault();
       onLinkClick(href);
     },
   });
-}
-
-StoryLinkWrapper.propTypes = {
-  href: PropTypes.string.isRequired,
-  passHref: PropTypes.bool,
-  children: PropTypes.node.isRequired,
 };
 
 StoryLinkWrapper.defaultProps = {
   passHref: false,
 };
+
+export default StoryLinkWrapper;
diff --git a/lib/components/src/bar/bar.js b/lib/components/src/bar/bar.tsx
similarity index 82%
rename from lib/components/src/bar/bar.js
rename to lib/components/src/bar/bar.tsx
index 9a4681560db8..67c2578038fd 100644
--- a/lib/components/src/bar/bar.js
+++ b/lib/components/src/bar/bar.tsx
@@ -1,10 +1,14 @@
-import React, { Children } from 'react';
-import PropTypes from 'prop-types';
+import React, { Children, FunctionComponent } from 'react';
 import { styled } from '@storybook/theming';
 
 import { ScrollArea } from '../ScrollArea/ScrollArea';
 
-const Side = styled.div(
+interface SideProps {
+  left?: boolean;
+  right?: boolean;
+}
+
+const Side = styled.div<SideProps>(
   {
     display: 'flex',
     whiteSpace: 'nowrap',
@@ -62,7 +66,11 @@ const BarInner = styled.div({
   height: 40,
 });
 
-export const FlexBar = ({ children, ...rest }) => {
+interface FlexBarProps {
+  border?: boolean;
+}
+
+export const FlexBar: FunctionComponent<FlexBarProps> = ({ children, ...rest }) => {
   const [left, right] = Children.toArray(children);
   return (
     <Bar {...rest}>
@@ -74,7 +82,3 @@ export const FlexBar = ({ children, ...rest }) => {
   );
 };
 FlexBar.displayName = 'FlexBar';
-
-FlexBar.propTypes = {
-  children: PropTypes.node.isRequired,
-};
diff --git a/lib/components/src/bar/button.js b/lib/components/src/bar/button.ts
similarity index 89%
rename from lib/components/src/bar/button.js
rename to lib/components/src/bar/button.ts
index 5f0a6b39d2b9..68d23b584a2c 100644
--- a/lib/components/src/bar/button.js
+++ b/lib/components/src/bar/button.ts
@@ -1,6 +1,10 @@
 import { styled } from '@storybook/theming';
 
-export const TabButton = styled.button(
+interface TabButtonProps {
+  active?: boolean;
+}
+
+export const TabButton = styled.button<TabButtonProps>(
   {
     whiteSpace: 'normal',
     display: 'inline-flex',
@@ -47,7 +51,11 @@ export const TabButton = styled.button(
 );
 TabButton.displayName = 'TabButton';
 
-export const IconButton = styled.button(
+interface IconButtonProps {
+  active?: boolean;
+}
+
+export const IconButton = styled.button<IconButtonProps>(
   ({ theme }) => ({
     height: 40,
     background: 'none',
diff --git a/lib/components/src/bar/separator.js b/lib/components/src/bar/separator.tsx
similarity index 80%
rename from lib/components/src/bar/separator.js
rename to lib/components/src/bar/separator.tsx
index 55ae9ee27c8e..ac42075968dd 100644
--- a/lib/components/src/bar/separator.js
+++ b/lib/components/src/bar/separator.tsx
@@ -1,13 +1,12 @@
 import React, { Fragment } from 'react';
 import { styled } from '@storybook/theming';
 
-export const interleaveSeparators = list =>
+export const interleaveSeparators = (list: any[]) =>
   list.reduce(
     (acc, item, index) =>
       item ? (
         <Fragment key={item.id || item.key || `f-${index}`}>
           {acc}
-          {/* eslint-disable-next-line react/no-array-index-key */}
           {index > 0 ? <Separator key={`s-${index}`} /> : null}
           {item.render() || item}
         </Fragment>
@@ -17,7 +16,11 @@ export const interleaveSeparators = list =>
     null
   );
 
-export const Separator = styled.span(
+interface SeparatorProps {
+  force?: boolean;
+}
+
+export const Separator = styled.span<SeparatorProps>(
   ({ theme }) => ({
     width: 1,
     height: 24,
diff --git a/lib/components/src/brand/StorybookIcon.stories.js b/lib/components/src/brand/StorybookIcon.stories.tsx
similarity index 100%
rename from lib/components/src/brand/StorybookIcon.stories.js
rename to lib/components/src/brand/StorybookIcon.stories.tsx
diff --git a/lib/components/src/brand/StorybookIcon.js b/lib/components/src/brand/StorybookIcon.tsx
similarity index 91%
rename from lib/components/src/brand/StorybookIcon.js
rename to lib/components/src/brand/StorybookIcon.tsx
index 86dbc0df761d..1f35e0adce4f 100644
--- a/lib/components/src/brand/StorybookIcon.js
+++ b/lib/components/src/brand/StorybookIcon.tsx
@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 
-export const StorybookIcon = ({ ...props }) => (
-  <svg viewBox="0 0 64 64" {...props} title="Storybook icon">
+export const StorybookIcon: FunctionComponent<{}> = ({ ...props }) => (
+  <svg viewBox="0 0 64 64" {...props}>
+    <title>Storybook icon</title>
     <g id="Artboard" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
       <path
         d="M8.04798541,58.7875918 L6.07908839,6.32540407 C6.01406344,4.5927838 7.34257463,3.12440831 9.07303814,3.01625434 L53.6958037,0.227331489 C55.457209,0.117243658 56.974354,1.45590096 57.0844418,3.21730626 C57.0885895,3.28366922 57.0906648,3.35014546 57.0906648,3.41663791 L57.0906648,60.5834697 C57.0906648,62.3483119 55.6599776,63.7789992 53.8951354,63.7789992 C53.847325,63.7789992 53.7995207,63.7779262 53.7517585,63.775781 L11.0978899,61.8600599 C9.43669044,61.7854501 8.11034889,60.4492961 8.04798541,58.7875918 Z"
diff --git a/lib/components/src/brand/StorybookLogo.stories.js b/lib/components/src/brand/StorybookLogo.stories.tsx
similarity index 70%
rename from lib/components/src/brand/StorybookLogo.stories.js
rename to lib/components/src/brand/StorybookLogo.stories.tsx
index 2ff676dffdfe..79dcbba4bf31 100644
--- a/lib/components/src/brand/StorybookLogo.stories.js
+++ b/lib/components/src/brand/StorybookLogo.stories.tsx
@@ -7,4 +7,4 @@ export default {
   title: 'Basics|Brand/StorybookLogo',
 };
 
-export const normal = () => <StorybookLogo />;
+export const normal = () => <StorybookLogo alt="Storybook logo" />;
diff --git a/lib/components/src/brand/StorybookLogo.js b/lib/components/src/brand/StorybookLogo.tsx
similarity index 93%
rename from lib/components/src/brand/StorybookLogo.js
rename to lib/components/src/brand/StorybookLogo.tsx
index ace23e59dea4..c8ff2bf7a548 100644
--- a/lib/components/src/brand/StorybookLogo.js
+++ b/lib/components/src/brand/StorybookLogo.tsx
@@ -1,8 +1,11 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent } from 'react';
 
-export const StorybookLogo = ({ alt, ...props }) => (
-  <svg width="200px" height="40px" viewBox="0 0 200 40" {...props} title={alt} role="img">
+export interface StorybookLogoProps {
+  alt: string;
+}
+
+export const StorybookLogo: FunctionComponent<StorybookLogoProps> = ({ alt, ...props }) => (
+  <svg width="200px" height="40px" viewBox="0 0 200 40" {...props} role="img">
     {alt ? <title>{alt}</title> : null}
     <defs>
       <path
@@ -28,7 +31,3 @@ export const StorybookLogo = ({ alt, ...props }) => (
     </g>
   </svg>
 );
-
-StorybookLogo.propTypes = {
-  alt: PropTypes.string.isRequired,
-};
diff --git a/lib/components/src/brand/__snapshots__/StorybookIcon.stories.storyshot b/lib/components/src/brand/__snapshots__/StorybookIcon.stories.storyshot
index e7aa2654e367..f0fc7565bd2b 100644
--- a/lib/components/src/brand/__snapshots__/StorybookIcon.stories.storyshot
+++ b/lib/components/src/brand/__snapshots__/StorybookIcon.stories.storyshot
@@ -2,9 +2,11 @@
 
 exports[`Storyshots Basics|Brand/StorybookIcon default 1`] = `
 <svg
-  title="Storybook icon"
   viewBox="0 0 64 64"
 >
+  <title>
+    Storybook icon
+  </title>
   <g
     fill="none"
     fill-rule="evenodd"
diff --git a/lib/components/src/form/field/field.js b/lib/components/src/form/field/field.tsx
similarity index 78%
rename from lib/components/src/form/field/field.js
rename to lib/components/src/form/field/field.tsx
index ede070481477..9b25d39c55f1 100644
--- a/lib/components/src/form/field/field.js
+++ b/lib/components/src/form/field/field.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent, ReactNode } from 'react';
 import { styled } from '@storybook/theming';
 
 const Wrapper = styled.label(({ theme }) => ({
@@ -23,7 +22,11 @@ const Label = styled.span(({ theme }) => ({
   lineHeight: '16px',
 }));
 
-const Field = ({ label, children }) => (
+export interface FieldProps {
+  label?: ReactNode;
+}
+
+const Field: FunctionComponent<FieldProps> = ({ label, children }) => (
   <Wrapper>
     {label ? (
       <Label>
@@ -33,10 +36,7 @@ const Field = ({ label, children }) => (
     {children}
   </Wrapper>
 );
-Field.propTypes = {
-  label: PropTypes.node,
-  children: PropTypes.node.isRequired,
-};
+
 Field.defaultProps = {
   label: undefined,
 };
diff --git a/lib/components/src/form/form.stories.js b/lib/components/src/form/form.stories.tsx
similarity index 100%
rename from lib/components/src/form/form.stories.js
rename to lib/components/src/form/form.stories.tsx
diff --git a/lib/components/src/form/index.js b/lib/components/src/form/index.tsx
similarity index 100%
rename from lib/components/src/form/index.js
rename to lib/components/src/form/index.tsx
diff --git a/lib/components/src/form/input/input.js b/lib/components/src/form/input/input.tsx
similarity index 74%
rename from lib/components/src/form/input/input.js
rename to lib/components/src/form/input/input.tsx
index b6c2c40af32e..fa90c674fc39 100644
--- a/lib/components/src/form/input/input.js
+++ b/lib/components/src/form/input/input.tsx
@@ -1,4 +1,4 @@
-import { styled } from '@storybook/theming';
+import { styled, Theme } from '@storybook/theming';
 import { withProps } from 'recompose';
 
 import TextareaAutoResize from 'react-textarea-autosize';
@@ -18,7 +18,7 @@ const styleResets = {
   position: 'relative',
 };
 
-const styles = ({ theme }) => ({
+const styles = ({ theme }: Theme) => ({
   ...styleResets,
 
   transition: 'all 200ms ease-out',
@@ -43,7 +43,7 @@ const styles = ({ theme }) => ({
   },
 });
 
-const sizes = ({ size }) => {
+const sizes = ({ size }: { size?: string | number }) => {
   switch (size) {
     case '100%': {
       return { width: '100%' };
@@ -57,7 +57,7 @@ const sizes = ({ size }) => {
     }
   }
 };
-const alignment = ({ align }) => {
+const alignment = ({ align }: { align: string }) => {
   switch (align) {
     case 'end': {
       return { textAlign: 'right' };
@@ -71,7 +71,7 @@ const alignment = ({ align }) => {
     }
   }
 };
-const validation = ({ valid, theme }) => {
+const validation = ({ valid, theme }: { valid: string; theme: Theme }) => {
   switch (valid) {
     case 'valid': {
       return { boxShadow: `${theme.color.positive} 0 0 0 1px inset !important` };
@@ -92,27 +92,35 @@ const validation = ({ valid, theme }) => {
   }
 };
 
-export const Input = styled.input(styles, sizes, alignment, validation, { minHeight: 32 });
-Input.styles = { ...styleResets, ...styles };
-Input.sizes = sizes;
-Input.alignment = alignment;
+export const Input = styled.input<any>(styles as any, sizes, alignment as any, validation, {
+  minHeight: 32,
+});
+(Input as any).styles = { ...styleResets, ...styles };
+(Input as any).sizes = sizes;
+(Input as any).alignment = alignment;
 Input.displayName = 'Input';
 
-export const Select = styled.select(styles, sizes, validation, {
+export const Select = styled.select(styles as any, sizes, validation, {
   height: 32,
   userSelect: 'none',
   paddingRight: 20,
   appearance: 'menulist',
-});
+} as any) as any;
 Select.displayName = 'Select';
 
-export const Textarea = styled(TextareaAutoResize)(styles, sizes, alignment, validation, {
-  overflow: 'visible',
-});
+export const Textarea = styled(TextareaAutoResize)(
+  styles as any,
+  sizes,
+  alignment as any,
+  validation,
+  {
+    overflow: 'visible',
+  }
+) as any;
 Textarea.displayName = 'Textarea';
 
 export const Button = withProps({ tertiary: true, small: true, inForm: true })(
-  styled(StyledButton)(sizes, validation, {
+  styled(StyledButton)(sizes as any, validation as any, {
     // Custom styling for color widget nested in buttons
     userSelect: 'none',
     overflow: 'visible',
@@ -123,5 +131,5 @@ export const Button = withProps({ tertiary: true, small: true, inForm: true })(
       transform: 'none',
     },
   })
-);
+) as any;
 Button.displayName = 'Button';
diff --git a/lib/components/src/icon/icon.stories.js b/lib/components/src/icon/icon.stories.tsx
similarity index 87%
rename from lib/components/src/icon/icon.stories.js
rename to lib/components/src/icon/icon.stories.tsx
index 6dbda1acb8b6..6f9793fc3497 100644
--- a/lib/components/src/icon/icon.stories.js
+++ b/lib/components/src/icon/icon.stories.tsx
@@ -3,14 +3,18 @@ import { styled } from '@storybook/theming';
 import { storiesOf } from '@storybook/react';
 
 import Icon from './icon';
-import icons from './icons';
+import icons, { IconKey } from './icons';
 
 const Meta = styled.div({
   color: '#333',
   fontSize: 12,
 });
 
-const Item = styled.div(
+interface ItemProps {
+  minimal?: boolean;
+}
+
+const Item = styled.div<ItemProps>(
   {
     display: 'inline-flex',
     flexDirection: 'row',
@@ -50,7 +54,7 @@ const List = styled.div({
   flexFlow: 'row wrap',
 });
 
-const list = Object.keys(icons).sort();
+const list = Object.keys(icons).sort() as IconKey[];
 
 storiesOf('Basics|Icon', module)
   .add('labels', () => (
diff --git a/lib/components/src/icon/icon.js b/lib/components/src/icon/icon.tsx
similarity index 61%
rename from lib/components/src/icon/icon.js
rename to lib/components/src/icon/icon.tsx
index f4c89b582698..77f68855218e 100644
--- a/lib/components/src/icon/icon.js
+++ b/lib/components/src/icon/icon.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent } from 'react';
 import { styled } from '@storybook/theming';
-import icons from './icons';
+import icons, { IconKey } from './icons';
 
 import Svg from './svg';
 
@@ -9,17 +8,17 @@ const Path = styled.path({
   fill: 'currentColor',
 });
 
+export interface IconProps {
+  icon: IconKey;
+}
+
 // TODO: if we can resize the 1024 to 20, we can remove the size attributes
-function Icon({ icon, ...props }) {
+const Icon: FunctionComponent<IconProps> = ({ icon, ...props }) => {
   return (
     <Svg viewBox="0 0 1024 1024" {...props}>
       <Path d={icons[icon]} />
     </Svg>
   );
-}
-
-Icon.propTypes = {
-  icon: PropTypes.string.isRequired,
 };
 
 export default Icon;
diff --git a/lib/components/src/icon/icons.js b/lib/components/src/icon/icons.tsx
similarity index 99%
rename from lib/components/src/icon/icons.js
rename to lib/components/src/icon/icons.tsx
index 7d1dfa0d2f67..2fd80118afc4 100644
--- a/lib/components/src/icon/icons.js
+++ b/lib/components/src/icon/icons.tsx
@@ -306,3 +306,5 @@ const icons = {
 };
 
 export default icons;
+
+export type IconKey = keyof typeof icons;
diff --git a/lib/components/src/icon/svg.js b/lib/components/src/icon/svg.tsx
similarity index 82%
rename from lib/components/src/icon/svg.js
rename to lib/components/src/icon/svg.tsx
index cebc11e6b91d..3e2eb66254c5 100644
--- a/lib/components/src/icon/svg.js
+++ b/lib/components/src/icon/svg.tsx
@@ -1,6 +1,10 @@
 import { styled } from '@storybook/theming';
 
-const Svg = styled.svg(
+interface SvgProps {
+  inline?: boolean;
+}
+
+const Svg = styled.svg<SvgProps>(
   {
     // Fix rendering bugs in Chrome for hdpi
     shapeRendering: 'inherit',
diff --git a/lib/components/src/index.js b/lib/components/src/index.ts
similarity index 93%
rename from lib/components/src/index.js
rename to lib/components/src/index.ts
index fc6b34ece8be..d42b43892d53 100644
--- a/lib/components/src/index.js
+++ b/lib/components/src/index.ts
@@ -3,7 +3,7 @@ export { default as Badge } from './Badge/Badge';
 // Typography
 export { default as Link } from './typography/link/link';
 export { default as DocumentFormatting } from './typography/DocumentFormatting';
-export SyntaxHighlighter from './syntaxhighlighter/syntaxhighlighter';
+export { default as SyntaxHighlighter } from './syntaxhighlighter/syntaxhighlighter';
 
 // UI
 export { ActionBar } from './ActionBar/ActionBar';
diff --git a/lib/components/src/placeholder/placeholder.stories.js b/lib/components/src/placeholder/placeholder.stories.tsx
similarity index 100%
rename from lib/components/src/placeholder/placeholder.stories.js
rename to lib/components/src/placeholder/placeholder.stories.tsx
diff --git a/lib/components/src/placeholder/placeholder.js b/lib/components/src/placeholder/placeholder.tsx
similarity index 69%
rename from lib/components/src/placeholder/placeholder.js
rename to lib/components/src/placeholder/placeholder.tsx
index cbb7bb41d6d4..64b2968afdf2 100644
--- a/lib/components/src/placeholder/placeholder.js
+++ b/lib/components/src/placeholder/placeholder.tsx
@@ -1,5 +1,4 @@
-import React, { Children } from 'react';
-import PropTypes from 'prop-types';
+import React, { Children, FunctionComponent } from 'react';
 import { styled } from '@storybook/theming';
 
 const Title = styled.div`
@@ -15,7 +14,7 @@ const Message = styled.div`
   font-size: ${props => props.theme.typography.size.s2 - 1}px;
 `;
 
-export const Placeholder = ({ children, ...props }) => {
+export const Placeholder: FunctionComponent = ({ children, ...props }) => {
   const [title, desc] = Children.toArray(children);
   return (
     <Message {...props}>
@@ -24,9 +23,3 @@ export const Placeholder = ({ children, ...props }) => {
     </Message>
   );
 };
-
-Placeholder.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-Placeholder.defaultProps = {};
diff --git a/lib/components/src/spaced/Spaced.stories.js b/lib/components/src/spaced/Spaced.stories.tsx
similarity index 100%
rename from lib/components/src/spaced/Spaced.stories.js
rename to lib/components/src/spaced/Spaced.stories.tsx
diff --git a/lib/components/src/spaced/Spaced.js b/lib/components/src/spaced/Spaced.tsx
similarity index 67%
rename from lib/components/src/spaced/Spaced.js
rename to lib/components/src/spaced/Spaced.tsx
index cf31adbcba89..bceb0664ce5c 100644
--- a/lib/components/src/spaced/Spaced.js
+++ b/lib/components/src/spaced/Spaced.tsx
@@ -1,10 +1,15 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import { styled } from '@storybook/theming';
-import PropTypes from 'prop-types';
 
-const toNumber = input => (typeof input === 'number' ? input : Number(input));
+const toNumber = (input: any) => (typeof input === 'number' ? input : Number(input));
 
-const Container = styled.div(
+interface ContainerProps {
+  col?: number;
+  row?: number;
+  outer?: number;
+}
+
+const Container = styled.div<ContainerProps>(
   ({ theme, col, row = 1 }) =>
     col
       ? {
@@ -47,7 +52,13 @@ const Container = styled.div(
   }
 );
 
-export const Spaced = ({ col, row, outer, children }) => {
+export interface SpacedProps {
+  col?: number;
+  row?: number;
+  outer?: number | boolean;
+}
+
+export const Spaced: FunctionComponent<SpacedProps> = ({ col, row, outer, children }) => {
   const outerAmount = toNumber(typeof outer === 'number' || !outer ? outer : col || row);
 
   return (
@@ -56,14 +67,3 @@ export const Spaced = ({ col, row, outer, children }) => {
     </Container>
   );
 };
-Spaced.propTypes = {
-  col: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
-  row: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
-  outer: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
-  children: PropTypes.node.isRequired,
-};
-Spaced.defaultProps = {
-  col: undefined,
-  row: undefined,
-  outer: undefined,
-};
diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.js b/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
similarity index 100%
rename from lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.js
rename to lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.js b/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
similarity index 73%
rename from lib/components/src/syntaxhighlighter/syntaxhighlighter.js
rename to lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
index ab2b6cdec55c..ffbb4ea3fe1a 100644
--- a/lib/components/src/syntaxhighlighter/syntaxhighlighter.js
+++ b/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';
 import { document, window } from 'global';
 import memoize from 'memoizerific';
@@ -10,6 +9,7 @@ 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 { js as beautify } from 'js-beautify';
 import { ActionBar } from '../ActionBar/ActionBar';
 import { ScrollArea } from '../ScrollArea/ScrollArea';
@@ -23,7 +23,12 @@ const themedSyntax = memoize(2)(theme =>
   Object.entries(theme.code || {}).reduce((acc, [key, val]) => ({ ...acc, [`* .${key}`]: val }), {})
 );
 
-const Wrapper = styled.div(
+interface WrapperProps {
+  bordered?: boolean;
+  padded?: boolean;
+}
+
+const Wrapper = styled.div<WrapperProps>(
   {
     position: 'relative',
     overflow: 'hidden',
@@ -54,7 +59,11 @@ const Scroller = styled(({ children, className }) => (
   ({ theme }) => themedSyntax(theme)
 );
 
-const Pre = styled.pre(({ theme, padded }) => ({
+interface PreProps {
+  padded?: boolean;
+}
+
+const Pre = styled.pre<PreProps>(({ theme, padded }) => ({
   display: 'flex',
   justifyContent: 'flex-start',
   margin: 0,
@@ -67,20 +76,46 @@ const Code = styled.code({
   opacity: 1,
 });
 
-export default class CopyableCode extends Component {
+export interface CopyableCodeProps {
+  language: string;
+  copyable?: boolean;
+  bordered?: boolean;
+  padded?: boolean;
+  format?: boolean;
+  className?: string;
+}
+
+export interface CopyableCodeState {
+  copied: boolean;
+}
+
+export default class CopyableCode extends Component<
+  CopyableCodeProps & SyntaxHighlighterProps,
+  CopyableCodeState
+> {
+  static defaultProps: CopyableCodeProps = {
+    language: null,
+    copyable: false,
+    bordered: false,
+    padded: false,
+    format: true,
+    className: null,
+  };
+
   state = { copied: false };
 
-  formatCode = memoize(2)((language, code) => {
+  formatCode = memoize(2)((language: string, code: string) => {
     let formattedCode = code;
     if (language === 'jsx') {
       try {
+        // tslint:disable-next-line:no-object-literal-type-assertion
         formattedCode = beautify(code, {
           indent_size: 2,
-          brace_style: 'collapse,preserve-inline',
+          brace_style: 'collapse-preserve-inline',
           end_with_newline: true,
           wrap_line_length: 80,
-          e4x: true,
-        });
+          e4x: true, // e4x is not available in JsBeautify types for now
+        } as JsBeautifyOptions);
       } catch (error) {
         console.warn("Couldn't format code", formattedCode); // eslint-disable-line no-console
       }
@@ -88,7 +123,7 @@ export default class CopyableCode extends Component {
     return formattedCode;
   });
 
-  onClick = e => {
+  onClick = (e: React.MouseEvent) => {
     const { children } = this.props;
 
     e.preventDefault();
@@ -133,7 +168,9 @@ export default class CopyableCode extends Component {
             lineNumberContainerStyle={{}}
             {...rest}
           >
-            {format ? this.formatCode(language, children.trim()) : children.trim()}
+            {format
+              ? this.formatCode(language, (children as string).trim())
+              : (children as string).trim()}
           </SyntaxHighlighter>
         </Scroller>
         {copyable ? (
@@ -143,21 +180,3 @@ export default class CopyableCode extends Component {
     ) : null;
   }
 }
-
-CopyableCode.propTypes = {
-  language: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
-  copyable: PropTypes.bool,
-  bordered: PropTypes.bool,
-  padded: PropTypes.bool,
-  format: PropTypes.bool,
-  className: PropTypes.string,
-};
-
-CopyableCode.defaultProps = {
-  copyable: false,
-  bordered: false,
-  padded: false,
-  format: true,
-  className: null,
-};
diff --git a/lib/components/src/tabs/tabs.stories.js b/lib/components/src/tabs/tabs.stories.tsx
similarity index 85%
rename from lib/components/src/tabs/tabs.stories.js
rename to lib/components/src/tabs/tabs.stories.tsx
index 7e537880203f..b8c416d7403b 100644
--- a/lib/components/src/tabs/tabs.stories.js
+++ b/lib/components/src/tabs/tabs.stories.tsx
@@ -1,17 +1,24 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, Key } from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { logger } from '@storybook/client-logger';
 
-import { Tabs, TabsState, panelProps, TabWrapper } from './tabs';
+import { Tabs, TabsState, TabWrapper } from './tabs';
 
-const colours = [...new Array(15)].map((_, i) =>
+const colours = Array.from(new Array(15), (val, index) => index).map(i =>
   Math.floor((1 / 15) * i * 16777215)
     .toString(16)
     .padStart(6, '0')
 );
 
-function fibonacci(num, memo = {}) {
+interface FibonacciMap {
+  [key: string]: number;
+}
+
+function fibonacci(num: number, memo?: FibonacciMap): number {
+  if (!memo) {
+    memo = {};
+  }
   if (memo[num]) {
     return memo[num];
   }
@@ -19,12 +26,18 @@ function fibonacci(num, memo = {}) {
     return 1;
   }
 
-  // eslint-disable-next-line no-param-reassign
   memo[num] = fibonacci(num - 1, memo) + fibonacci(num - 2, memo);
   return memo[num];
 }
 
-const panels = {
+interface Panels {
+  [key: string]: {
+    title: string;
+    render: ({ active, key }: { active: boolean; key: Key }) => JSX.Element;
+  };
+}
+
+const panels: Panels = {
   test1: {
     title: 'Tab title #1',
     // eslint-disable-next-line react/prop-types
@@ -94,12 +107,6 @@ const panels = {
     ),
   },
 };
-panels.test1.propTypes = panelProps;
-panels.test2.propTypes = panelProps;
-panels.test3.propTypes = panelProps;
-panels.test4.propTypes = panelProps;
-panels.test5.propTypes = panelProps;
-panels.test6.propTypes = panelProps;
 
 const onSelect = action('onSelect');
 
@@ -125,7 +132,9 @@ storiesOf('Basics|Tabs', module)
   .add('stateful - static', () => (
     <TabsState initial="test2">
       <div id="test1" title="With a function">
-        {({ active, selected }) => (active ? <div>{selected} is selected</div> : null)}
+        {({ active, selected }: { active: boolean; selected: string }) =>
+          active ? <div>{selected} is selected</div> : null
+        }
       </div>
       <div id="test2" title="With markup">
         <div>test2 is always active (but visually hidden)</div>
diff --git a/lib/components/src/tabs/tabs.js b/lib/components/src/tabs/tabs.tsx
similarity index 71%
rename from lib/components/src/tabs/tabs.js
rename to lib/components/src/tabs/tabs.tsx
index 5541717e508a..85891d98bf6a 100644
--- a/lib/components/src/tabs/tabs.js
+++ b/lib/components/src/tabs/tabs.tsx
@@ -1,4 +1,4 @@
-import React, { Children, Component, Fragment } from 'react';
+import React, { Children, Component, Fragment, FunctionComponent, MouseEvent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';
 
@@ -6,7 +6,12 @@ import { Placeholder } from '../placeholder/placeholder';
 import { FlexBar } from '../bar/bar';
 import { TabButton } from '../bar/button';
 
-const Wrapper = styled.div(
+interface WrapperProps {
+  bordered?: boolean;
+  absolute?: boolean;
+}
+
+const Wrapper = styled.div<WrapperProps>(
   ({ theme, bordered }) =>
     bordered
       ? {
@@ -38,7 +43,11 @@ export const TabBar = styled.div({
   },
 });
 
-const Content = styled.div(
+interface ContentProps {
+  absolute?: boolean;
+}
+
+const Content = styled.div<ContentProps>(
   {
     display: 'block',
     position: 'relative',
@@ -70,27 +79,29 @@ const Content = styled.div(
       : {}
 );
 
-const VisuallyHidden = styled.div(({ active }) =>
+interface VisuallyHiddenProps {
+  active?: boolean;
+}
+
+const VisuallyHidden = styled.div<VisuallyHiddenProps>(({ active }) =>
   active ? { display: 'block' } : { display: 'none' }
 );
-export const TabWrapper = ({ active, render, children }) => (
+
+interface TabWrapperProps {
+  active: boolean;
+  render?: () => JSX.Element;
+  children?: ReactNode;
+}
+
+export const TabWrapper: FunctionComponent<TabWrapperProps> = ({ active, render, children }) => (
   <VisuallyHidden active={active}>{render ? render() : children}</VisuallyHidden>
 );
-TabWrapper.propTypes = {
-  active: PropTypes.bool.isRequired,
-  render: PropTypes.func,
-  children: PropTypes.node,
-};
-TabWrapper.defaultProps = {
-  render: undefined,
-  children: undefined,
-};
 
 export const panelProps = {
   active: PropTypes.bool,
 };
 
-const childrenToList = (children, selected) =>
+const childrenToList = (children: any, selected: string) =>
   Children.toArray(children).map(({ props: { title, id, children: childrenOfChild } }, index) => {
     const content = Array.isArray(childrenOfChild) ? childrenOfChild[0] : childrenOfChild;
     return {
@@ -101,7 +112,7 @@ const childrenToList = (children, selected) =>
         typeof content === 'function'
           ? content
           : // eslint-disable-next-line react/prop-types
-            ({ active, key }) => (
+            ({ active, key }: any) => (
               <VisuallyHidden key={key} active={active} role="tabpanel">
                 {content}
               </VisuallyHidden>
@@ -109,8 +120,20 @@ const childrenToList = (children, selected) =>
     };
   });
 
-export const Tabs = React.memo(
-  ({ children, selected, actions, absolute, bordered, tools, id: htmlId }) => {
+interface TabsProps {
+  id?: string;
+  children?: ReactNode;
+  tools?: ReactNode;
+  selected?: string;
+  actions?: {
+    onSelect: (id: string) => void;
+  };
+  absolute?: boolean;
+  bordered?: boolean;
+}
+
+export const Tabs = React.memo<TabsProps>(
+  ({ children, selected, actions, absolute, bordered, tools, id: htmlId }: TabsProps) => {
     const list = childrenToList(children, selected);
 
     return list.length ? (
@@ -122,7 +145,10 @@ export const Tabs = React.memo(
                 type="button"
                 key={id}
                 active={active}
-                onClick={e => e.preventDefault() || actions.onSelect(id)}
+                onClick={(e: MouseEvent) => {
+                  e.preventDefault();
+                  actions.onSelect(id);
+                }}
                 role="tab"
               >
                 {typeof title === 'function' ? title() : title}
@@ -143,18 +169,7 @@ export const Tabs = React.memo(
   }
 );
 Tabs.displayName = 'Tabs';
-Tabs.propTypes = {
-  id: PropTypes.string,
-  children: PropTypes.node,
-  tools: PropTypes.node,
-  selected: PropTypes.string,
-  actions: PropTypes.shape({
-    onSelect: PropTypes.func.isRequired,
-  }).isRequired,
-  absolute: PropTypes.bool,
-  bordered: PropTypes.bool,
-};
-Tabs.defaultProps = {
+(Tabs as any).defaultProps = {
   id: null,
   children: null,
   tools: null,
@@ -163,23 +178,28 @@ Tabs.defaultProps = {
   bordered: false,
 };
 
-// eslint-disable-next-line react/no-multi-comp
-export class TabsState extends Component {
-  static propTypes = {
-    children: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.node, PropTypes.func])),
-    initial: PropTypes.string,
-    absolute: PropTypes.bool,
-    bordered: PropTypes.bool,
-  };
+type FuncChilden = () => void;
+
+interface TabsStateProps {
+  children: Array<ReactNode | FuncChilden>;
+  initial: string;
+  absolute: boolean;
+  bordered: boolean;
+}
+
+interface TabsStateState {
+  selected: string;
+}
 
-  static defaultProps = {
+export class TabsState extends Component<TabsStateProps, TabsStateState> {
+  static defaultProps: TabsStateProps = {
     children: [],
     initial: null,
     absolute: false,
     bordered: false,
   };
 
-  constructor(props) {
+  constructor(props: TabsStateProps) {
     super(props);
 
     this.state = {
diff --git a/lib/components/src/tooltip/ListItem.stories.js b/lib/components/src/tooltip/ListItem.stories.tsx
similarity index 100%
rename from lib/components/src/tooltip/ListItem.stories.js
rename to lib/components/src/tooltip/ListItem.stories.tsx
diff --git a/lib/components/src/tooltip/ListItem.js b/lib/components/src/tooltip/ListItem.tsx
similarity index 74%
rename from lib/components/src/tooltip/ListItem.js
rename to lib/components/src/tooltip/ListItem.tsx
index 7bc3ead1f3cf..85a25c59dcc5 100644
--- a/lib/components/src/tooltip/ListItem.js
+++ b/lib/components/src/tooltip/ListItem.tsx
@@ -1,13 +1,19 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent, ReactNode } from 'react';
 import { styled } from '@storybook/theming';
 import memoize from 'memoizerific';
 import { transparentize } from 'polished';
 
-const Title = styled.span(
+interface TitleProps {
+  active?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+}
+
+const Title = styled.span<TitleProps>(
   ({ theme }) => ({
     color: theme.color.defaultText,
-    fontWeight: theme.typography.weight.normal,
+    // Previously was theme.typography.weight.normal but this weight does not exists in Theme
+    fontWeight: theme.typography.weight.regular,
   }),
   ({ active, theme }) =>
     active
@@ -29,10 +35,14 @@ const Title = styled.span(
       ? {
           color: transparentize(0.7, theme.color.defaultText),
         }
-      : {}
+      : {},
 );
 
-const Right = styled.span(
+interface RightProps {
+  active?: boolean;
+}
+
+const Right = styled.span<RightProps>(
   {
     '& svg': {
       transition: 'all 200ms ease-out',
@@ -41,7 +51,7 @@ const Right = styled.span(
       width: '12px',
       margin: '3px 0',
       verticalAlign: 'top',
-    },
+    } as any,
     '& path': {
       fill: 'inherit',
     },
@@ -56,7 +66,7 @@ const Right = styled.span(
             fill: theme.color.primary,
           },
         }
-      : {}
+      : {},
 );
 
 const Center = styled.span({
@@ -69,7 +79,12 @@ const Center = styled.span({
   },
 });
 
-const CenterText = styled.span(
+interface CenterTextProps {
+  active?: boolean;
+  disabled?: boolean;
+}
+
+const CenterText = styled.span<CenterTextProps>(
   {
     flex: 1,
     textAlign: 'center',
@@ -85,10 +100,14 @@ const CenterText = styled.span(
       ? {
           color: theme.color.mediumdark,
         }
-      : {}
+      : {},
 );
 
-const Left = styled.span(({ active, theme }) =>
+interface LeftProps {
+  active?: boolean;
+}
+
+const Left = styled.span<LeftProps>(({ active, theme }) =>
   active
     ? {
         '& svg': {
@@ -98,10 +117,14 @@ const Left = styled.span(({ active, theme }) =>
           fill: theme.color.primary,
         },
       }
-    : {}
+    : {},
 );
 
-const Item = styled.a(
+interface ItemProps {
+  disabled?: boolean;
+}
+
+const Item = styled.a<ItemProps>(
   ({ theme }) => ({
     fontSize: theme.typography.size.s1,
     transition: 'all 150ms ease-out',
@@ -131,7 +154,7 @@ const Item = styled.a(
       ? {
           cursor: 'not-allowed',
         }
-      : {}
+      : {},
 );
 
 const getItemProps = memoize(100)((onClick, href, LinkWrapper) => {
@@ -156,7 +179,23 @@ const getItemProps = memoize(100)((onClick, href, LinkWrapper) => {
   return result;
 });
 
-export default function ListItem({
+
+export type LinkWrapperType = FunctionComponent;
+
+export interface ListItemProps {
+  loading?: boolean;
+  left?: ReactNode;
+  title?: ReactNode;
+  center?: ReactNode;
+  right?: ReactNode;
+  active?: boolean;
+  disabled?: boolean;
+  href?: string | object;
+  LinkWrapper?: LinkWrapperType;
+  onClick?: () => void;
+}
+
+const ListItem: FunctionComponent<ListItemProps> = ({
   loading,
   left,
   title,
@@ -168,7 +207,7 @@ export default function ListItem({
   onClick,
   LinkWrapper,
   ...rest
-}) {
+}) => {
   const itemProps = getItemProps(onClick, href, LinkWrapper);
   const commonProps = { active, disabled, loading };
 
@@ -184,19 +223,6 @@ export default function ListItem({
       {right && <Right {...commonProps}>{right}</Right>}
     </Item>
   );
-}
-
-ListItem.propTypes = {
-  loading: PropTypes.bool,
-  left: PropTypes.node,
-  title: PropTypes.node,
-  center: PropTypes.node,
-  right: PropTypes.node,
-  active: PropTypes.bool,
-  disabled: PropTypes.bool,
-  href: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({})]),
-  LinkWrapper: PropTypes.func,
-  onClick: PropTypes.func,
 };
 
 ListItem.defaultProps = {
@@ -211,3 +237,5 @@ ListItem.defaultProps = {
   LinkWrapper: null,
   onClick: null,
 };
+
+export default ListItem;
diff --git a/lib/components/src/tooltip/Tooltip.stories.js b/lib/components/src/tooltip/Tooltip.stories.tsx
similarity index 100%
rename from lib/components/src/tooltip/Tooltip.stories.js
rename to lib/components/src/tooltip/Tooltip.stories.tsx
diff --git a/lib/components/src/tooltip/Tooltip.js b/lib/components/src/tooltip/Tooltip.tsx
similarity index 86%
rename from lib/components/src/tooltip/Tooltip.js
rename to lib/components/src/tooltip/Tooltip.tsx
index ea7d4cdef918..c9b2b82d1415 100644
--- a/lib/components/src/tooltip/Tooltip.js
+++ b/lib/components/src/tooltip/Tooltip.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent } from 'react';
 import memoize from 'memoizerific';
 
-import { styled } from '@storybook/theming';
+import { styled, Color } from '@storybook/theming';
 import { rgba, lighten, darken } from 'polished';
 
 const match = memoize(1000)((requestes, actual, value, fallback = 0) =>
@@ -11,7 +10,12 @@ const match = memoize(1000)((requestes, actual, value, fallback = 0) =>
 
 const ArrowSpacing = 8;
 
-const Arrow = styled.div(
+interface ArrowProps {
+  color: keyof Color;
+  placement: string;
+}
+
+const Arrow = styled.div<ArrowProps>(
   {
     position: 'absolute',
     borderStyle: 'solid',
@@ -67,7 +71,14 @@ const Arrow = styled.div(
   })
 );
 
-const Wrapper = styled.div(
+interface WrapperProps {
+  color: keyof Color;
+  placement: string;
+  hidden?: boolean;
+  hasChrome: boolean;
+}
+
+const Wrapper = styled.div<WrapperProps>(
   ({ hidden }) => ({
     display: hidden ? 'none' : 'inline-block',
     zIndex: 2147483647,
@@ -99,7 +110,16 @@ const Wrapper = styled.div(
         }
 );
 
-export default function Tooltip({
+export interface TooltipProps {
+  arrowRef?: any;
+  tooltipRef?: any;
+  hasChrome?: boolean;
+  arrowProps?: any;
+  placement?: string;
+  color?: keyof Color;
+}
+
+const Tooltip: FunctionComponent<TooltipProps> = ({
   placement,
   hasChrome,
   children,
@@ -108,24 +128,15 @@ export default function Tooltip({
   arrowRef,
   color,
   ...props
-}) {
+}) => {
   return (
     <Wrapper hasChrome={hasChrome} placement={placement} ref={tooltipRef} {...props} color={color}>
       {hasChrome && <Arrow placement={placement} ref={arrowRef} {...arrowProps} color={color} />}
       {children}
     </Wrapper>
   );
-}
-
-Tooltip.propTypes = {
-  arrowRef: PropTypes.any, // eslint-disable-line react/forbid-prop-types
-  tooltipRef: PropTypes.any, // eslint-disable-line react/forbid-prop-types
-  children: PropTypes.node.isRequired,
-  hasChrome: PropTypes.bool,
-  arrowProps: PropTypes.shape({}),
-  placement: PropTypes.string,
-  color: PropTypes.string,
 };
+
 Tooltip.defaultProps = {
   color: undefined,
   arrowRef: undefined,
@@ -134,3 +145,5 @@ Tooltip.defaultProps = {
   placement: 'top',
   arrowProps: {},
 };
+
+export default Tooltip;
diff --git a/lib/components/src/tooltip/TooltipLinkList.stories.js b/lib/components/src/tooltip/TooltipLinkList.stories.tsx
similarity index 100%
rename from lib/components/src/tooltip/TooltipLinkList.stories.js
rename to lib/components/src/tooltip/TooltipLinkList.stories.tsx
diff --git a/lib/components/src/tooltip/TooltipLinkList.js b/lib/components/src/tooltip/TooltipLinkList.tsx
similarity index 54%
rename from lib/components/src/tooltip/TooltipLinkList.js
rename to lib/components/src/tooltip/TooltipLinkList.tsx
index 953e204a7e11..792fea78eb34 100644
--- a/lib/components/src/tooltip/TooltipLinkList.js
+++ b/lib/components/src/tooltip/TooltipLinkList.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent, Key, ReactNode } from 'react';
 import { styled } from '@storybook/theming';
 
-import ListItem from './ListItem';
+import ListItem, { LinkWrapperType } from './ListItem';
 
 const List = styled.div(
   {
@@ -14,9 +13,23 @@ const List = styled.div(
   })
 );
 
-const TooltipLinkList = ({ links, LinkWrapper }) => (
+export interface Link {
+  id: string;
+  title?: ReactNode;
+  active?: boolean;
+  href?: string | object;
+  onClick?: () => void;
+  isGatsby?: boolean;
+}
+
+export interface TooltipLinkListProps {
+  links: Link[];
+  LinkWrapper: LinkWrapperType;
+}
+
+const TooltipLinkList: FunctionComponent<TooltipLinkListProps> = ({ links, LinkWrapper }) => (
   <List>
-    {links.map(({ id, title, href, onClick, active, isGatsby, ...props }) => (
+    {links.map(({ id, title, href, onClick, active, isGatsby, ...props }: any) => (
       <ListItem
         key={id || title}
         title={title}
@@ -30,18 +43,6 @@ const TooltipLinkList = ({ links, LinkWrapper }) => (
   </List>
 );
 
-TooltipLinkList.propTypes = {
-  links: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.node.isRequired,
-      href: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({})]),
-      onClick: PropTypes.func,
-      active: PropTypes.bool,
-    }).isRequired
-  ).isRequired,
-  LinkWrapper: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.func]),
-};
-
 TooltipLinkList.defaultProps = {
   LinkWrapper: ListItem.defaultProps.LinkWrapper,
 };
diff --git a/lib/components/src/tooltip/TooltipMessage.stories.js b/lib/components/src/tooltip/TooltipMessage.stories.tsx
similarity index 100%
rename from lib/components/src/tooltip/TooltipMessage.stories.js
rename to lib/components/src/tooltip/TooltipMessage.stories.tsx
diff --git a/lib/components/src/tooltip/TooltipMessage.js b/lib/components/src/tooltip/TooltipMessage.tsx
similarity index 77%
rename from lib/components/src/tooltip/TooltipMessage.js
rename to lib/components/src/tooltip/TooltipMessage.tsx
index 92c4857b80db..91a87ee7264d 100644
--- a/lib/components/src/tooltip/TooltipMessage.js
+++ b/lib/components/src/tooltip/TooltipMessage.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FunctionComponent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';
 
@@ -31,7 +31,17 @@ const MessageWrapper = styled.div`
   box-sizing: border-box;
 `;
 
-function TooltipMessage({ title, desc, links }) {
+export interface TooltipMessageProps {
+  title?: ReactNode;
+  desc?: ReactNode;
+  links?: Array<{
+    title: string;
+    href?: string;
+    onClick?: () => void;
+  }>;
+}
+
+const TooltipMessage: FunctionComponent<TooltipMessageProps> = ({ title, desc, links }) => {
   return (
     <MessageWrapper>
       <Message>
@@ -49,16 +59,6 @@ function TooltipMessage({ title, desc, links }) {
       )}
     </MessageWrapper>
   );
-}
-
-TooltipMessage.propTypes = {
-  title: PropTypes.node,
-  desc: PropTypes.node,
-  links: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string.isRequired,
-    })
-  ),
 };
 
 TooltipMessage.defaultProps = {
diff --git a/lib/components/src/tooltip/TooltipNote.stories.js b/lib/components/src/tooltip/TooltipNote.stories.tsx
similarity index 100%
rename from lib/components/src/tooltip/TooltipNote.stories.js
rename to lib/components/src/tooltip/TooltipNote.stories.tsx
diff --git a/lib/components/src/tooltip/TooltipNote.js b/lib/components/src/tooltip/TooltipNote.tsx
similarity index 70%
rename from lib/components/src/tooltip/TooltipNote.js
rename to lib/components/src/tooltip/TooltipNote.tsx
index 2f826311790a..c32520d39c78 100644
--- a/lib/components/src/tooltip/TooltipNote.js
+++ b/lib/components/src/tooltip/TooltipNote.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';
 
@@ -17,10 +17,12 @@ const Note = styled.div`
   margin: 6px;
 `;
 
-export default function TooltipNote({ note }) {
-  return <Note>{note}</Note>;
+export interface TooltipNoteProps {
+  note: string;
 }
 
-TooltipNote.propTypes = {
-  note: PropTypes.string.isRequired,
+const TooltipNote: FunctionComponent<TooltipNoteProps> = ({ note }) => {
+  return <Note>{note}</Note>;
 };
+
+export default TooltipNote;
diff --git a/lib/components/src/tooltip/WithTooltip.stories.js b/lib/components/src/tooltip/WithTooltip.stories.tsx
similarity index 92%
rename from lib/components/src/tooltip/WithTooltip.stories.js
rename to lib/components/src/tooltip/WithTooltip.stories.tsx
index f4adbc844f47..5cf4c974cd27 100644
--- a/lib/components/src/tooltip/WithTooltip.stories.js
+++ b/lib/components/src/tooltip/WithTooltip.stories.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent } from 'react';
 import { storiesOf } from '@storybook/react';
 import { styled } from '@storybook/theming';
 
@@ -29,7 +28,11 @@ const Trigger = styled.div`
   color: white;
 `;
 
-const Tooltip = ({ onHide }) => (
+interface TooltipProps {
+  onHide?: () => void;
+}
+
+const Tooltip: FunctionComponent<TooltipProps> = ({ onHide }) => (
   <TooltipMessage
     title="Lorem ipsum dolor sit"
     desc="Amet consectatur vestibulum concet durum politu coret weirom"
@@ -37,10 +40,6 @@ const Tooltip = ({ onHide }) => (
   />
 );
 
-Tooltip.propTypes = {
-  onHide: PropTypes.func,
-};
-
 Tooltip.defaultProps = {
   onHide: null,
 };
diff --git a/lib/components/src/tooltip/WithTooltip.js b/lib/components/src/tooltip/WithTooltip.tsx
similarity index 75%
rename from lib/components/src/tooltip/WithTooltip.js
rename to lib/components/src/tooltip/WithTooltip.tsx
index 23962e559758..cbab1c7ebe05 100644
--- a/lib/components/src/tooltip/WithTooltip.js
+++ b/lib/components/src/tooltip/WithTooltip.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent, ReactNode } from 'react';
 import { styled } from '@storybook/theming';
 import { logger } from '@storybook/client-logger';
 import { withState, lifecycle } from 'recompose';
@@ -7,20 +6,33 @@ import { document } from 'global';
 
 import TooltipTrigger from 'react-popper-tooltip';
 import Tooltip from './Tooltip';
+import { Modifiers, Placement } from 'popper.js';
 
 // A target that doesn't speak popper
-// prettier-ignore
-const TargetContainer = styled.div`
+const TargetContainer = styled.div<{ mode: string }>`
   display: inline-block;
-  cursor: ${props => props.mode === 'hover' ? 'default' : 'pointer'};
+  cursor: ${props => (props.mode === 'hover' ? 'default' : 'pointer')};
 `;
 
-const TargetSvgContainer = styled.g`
+const TargetSvgContainer = styled.g<{ mode: string }>`
   cursor: ${props => (props.mode === 'hover' ? 'default' : 'pointer')};
 `;
 
+interface WithTooltipPureProps {
+  svg?: boolean;
+  trigger?: 'none' | 'hover' | 'click' | 'right-click';
+  closeOnClick?: boolean;
+  placement?: Placement;
+  modifiers?: Modifiers;
+  hasChrome?: boolean;
+  tooltip: ReactNode;
+  children: ReactNode;
+  tooltipShown?: boolean;
+  onVisibilityChange?: (visibility: boolean) => void;
+}
+
 // Pure, does not bind to the body
-const WithTooltipPure = ({
+const WithTooltipPure: FunctionComponent<WithTooltipPureProps> = ({
   svg,
   trigger,
   closeOnClick,
@@ -72,19 +84,6 @@ const WithTooltipPure = ({
   );
 };
 
-WithTooltipPure.propTypes = {
-  svg: PropTypes.bool,
-  trigger: PropTypes.string,
-  closeOnClick: PropTypes.bool,
-  placement: PropTypes.string,
-  modifiers: PropTypes.shape({}),
-  hasChrome: PropTypes.bool,
-  tooltip: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-  children: PropTypes.node.isRequired,
-  tooltipShown: PropTypes.bool,
-  onVisibilityChange: PropTypes.func.isRequired,
-};
-
 WithTooltipPure.defaultProps = {
   svg: false,
   trigger: 'hover',
@@ -95,15 +94,15 @@ WithTooltipPure.defaultProps = {
   tooltipShown: false,
 };
 
-const WithTooltip = lifecycle({
+const WithTooltip = lifecycle<WithTooltipPureProps, {}>({
   componentDidMount() {
     const { onVisibilityChange } = this.props;
     const hide = () => onVisibilityChange(false);
     document.addEventListener('keydown', hide, false);
 
     // Find all iframes on the screen and bind to clicks inside them (waiting until the iframe is ready)
-    const iframes = Array.from(document.getElementsByTagName('iframe'));
-    const unbinders = [];
+    const iframes: HTMLIFrameElement[] = Array.from(document.getElementsByTagName('iframe'));
+    const unbinders: Array<() => void> = [];
     iframes.forEach(iframe => {
       const bind = () => {
         try {
@@ -129,7 +128,7 @@ const WithTooltip = lifecycle({
       });
     });
 
-    this.unbind = () => {
+    (this as any).unbind = () => {
       document.removeEventListener('keydown', hide);
       unbinders.forEach(unbind => {
         unbind();
@@ -137,18 +136,18 @@ const WithTooltip = lifecycle({
     };
   },
   componentWillUnmount() {
-    if (this.unbind) {
-      this.unbind();
+    if ((this as any).unbind) {
+      (this as any).unbind();
     }
   },
 })(WithTooltipPure);
 
 export default WithTooltip;
 
-const WithToolTipState = withState(
+const WithToolTipState: any = withState(
   'tooltipShown',
   'onVisibilityChange',
   ({ startOpen }) => startOpen
-)(WithTooltip);
+)(WithTooltip as any);
 
 export { WithTooltipPure, WithToolTipState };
diff --git a/lib/components/src/tooltip/__snapshots__/ListItem.stories.storyshot b/lib/components/src/tooltip/__snapshots__/ListItem.stories.storyshot
index 953ec2576b8b..a65a0547e467 100644
--- a/lib/components/src/tooltip/__snapshots__/ListItem.stories.storyshot
+++ b/lib/components/src/tooltip/__snapshots__/ListItem.stories.storyshot
@@ -66,6 +66,7 @@ exports[`Storyshots basics|Tooltip/ListItem active icon 1`] = `
 
 .emotion-0 {
   color: #333333;
+  font-weight: 400;
   color: #FF4785;
   font-weight: 700;
 }
@@ -236,10 +237,12 @@ exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
 
 .emotion-3 {
   color: #333333;
+  font-weight: 400;
 }
 
 .emotion-0 {
   color: #333333;
+  font-weight: 400;
   -webkit-animation: animation-0 1.5s ease-in-out infinite;
   animation: animation-0 1.5s ease-in-out infinite;
   color: transparent;
@@ -277,6 +280,7 @@ exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
 
 .emotion-19 {
   color: #333333;
+  font-weight: 400;
   color: #FF4785;
   font-weight: 700;
 }
@@ -350,6 +354,7 @@ exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
 
 .emotion-33 {
   color: #333333;
+  font-weight: 400;
   color: rgba(51,51,51,0.3);
 }
 
@@ -598,6 +603,7 @@ exports[`Storyshots basics|Tooltip/ListItem default 1`] = `
 
 .emotion-0 {
   color: #333333;
+  font-weight: 400;
 }
 
 <a
@@ -681,6 +687,7 @@ exports[`Storyshots basics|Tooltip/ListItem default icon 1`] = `
 
 .emotion-0 {
   color: #333333;
+  font-weight: 400;
 }
 
 .emotion-4 svg {
@@ -794,6 +801,7 @@ exports[`Storyshots basics|Tooltip/ListItem disabled 1`] = `
 
 .emotion-1 {
   color: #333333;
+  font-weight: 400;
   color: rgba(51,51,51,0.3);
 }
 
@@ -944,6 +952,7 @@ exports[`Storyshots basics|Tooltip/ListItem loading 1`] = `
 
 .emotion-0 {
   color: #333333;
+  font-weight: 400;
   -webkit-animation: animation-0 1.5s ease-in-out infinite;
   animation: animation-0 1.5s ease-in-out infinite;
   color: transparent;
@@ -1021,6 +1030,7 @@ exports[`Storyshots basics|Tooltip/ListItem w/positions 1`] = `
 
 .emotion-1 {
   color: #333333;
+  font-weight: 400;
 }
 
 .emotion-4 svg {
@@ -1136,6 +1146,7 @@ exports[`Storyshots basics|Tooltip/ListItem w/positions active 1`] = `
 
 .emotion-1 {
   color: #333333;
+  font-weight: 400;
   color: #FF4785;
   font-weight: 700;
 }
diff --git a/lib/components/src/tooltip/__snapshots__/TooltipLinkList.stories.storyshot b/lib/components/src/tooltip/__snapshots__/TooltipLinkList.stories.storyshot
index 7d341d74cbd4..7a2cc780cf91 100644
--- a/lib/components/src/tooltip/__snapshots__/TooltipLinkList.stories.storyshot
+++ b/lib/components/src/tooltip/__snapshots__/TooltipLinkList.stories.storyshot
@@ -60,6 +60,7 @@ exports[`Storyshots basics/Tooltip/TooltipLinkList links 1`] = `
 
 .emotion-2 {
   color: #333333;
+  font-weight: 400;
 }
 
 .emotion-0 {
@@ -215,6 +216,7 @@ exports[`Storyshots basics/Tooltip/TooltipLinkList links and callback 1`] = `
 
 .emotion-2 {
   color: #333333;
+  font-weight: 400;
 }
 
 .emotion-0 {
diff --git a/lib/components/src/typings.d.ts b/lib/components/src/typings.d.ts
new file mode 100644
index 000000000000..eb62749232fa
--- /dev/null
+++ b/lib/components/src/typings.d.ts
@@ -0,0 +1,4 @@
+declare module 'global';
+declare module 'simplebar-react';
+declare module 'markdown-to-jsx';
+declare module '*.md';
diff --git a/lib/components/src/typography/DocumentFormatting.stories.js b/lib/components/src/typography/DocumentFormatting.stories.tsx
similarity index 99%
rename from lib/components/src/typography/DocumentFormatting.stories.js
rename to lib/components/src/typography/DocumentFormatting.stories.tsx
index d9822f25c0ab..1ed5142e56f2 100644
--- a/lib/components/src/typography/DocumentFormatting.stories.js
+++ b/lib/components/src/typography/DocumentFormatting.stories.tsx
@@ -8,7 +8,7 @@ export default {
   Component: DocumentFormatting,
   title: 'Basics|DocumentFormatting',
   decorators: [
-    storyFn => (
+    (storyFn: any) => (
       <div
         style={{ width: '600px', margin: '3rem auto', padding: '40px 20px', background: 'white' }}
       >
@@ -110,7 +110,7 @@ export const withDOM = () => (
       </li>
     </ol>
     <p>Start numbering with offset:</p>
-    <ol start="57">
+    <ol start={57}>
       <li>foo</li>
       <li>bar</li>
     </ol>
diff --git a/lib/components/src/typography/DocumentFormatting.js b/lib/components/src/typography/DocumentFormatting.tsx
similarity index 99%
rename from lib/components/src/typography/DocumentFormatting.js
rename to lib/components/src/typography/DocumentFormatting.tsx
index 4361f9875457..21e9c8cd8852 100644
--- a/lib/components/src/typography/DocumentFormatting.js
+++ b/lib/components/src/typography/DocumentFormatting.tsx
@@ -441,6 +441,6 @@ const Wrapper = styled.div(
   `
 );
 
-const StyledMarkdown = props => <Wrapper {...props} />;
+const StyledMarkdown = (props: any) => <Wrapper {...props} />;
 
 export default StyledMarkdown;
diff --git a/lib/components/src/typography/DocumentFormattingSample.md b/lib/components/src/typography/DocumentFormattingSample.md
index 381d5f0591c9..cb890346e089 100644
--- a/lib/components/src/typography/DocumentFormattingSample.md
+++ b/lib/components/src/typography/DocumentFormattingSample.md
@@ -117,7 +117,9 @@ Right aligned columns
 
 [link with title](http://nodeca.github.io/pica/demo/ 'title text!')
 
+<!--lint disable no-literal-urls-->
 Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
+<!--lint enable no-literal-urls-->
 
 ## Images
 
diff --git a/lib/components/src/typography/link/link.stories.js b/lib/components/src/typography/link/link.stories.tsx
similarity index 100%
rename from lib/components/src/typography/link/link.stories.js
rename to lib/components/src/typography/link/link.stories.tsx
diff --git a/lib/components/src/typography/link/link.test.js b/lib/components/src/typography/link/link.test.tsx
similarity index 93%
rename from lib/components/src/typography/link/link.test.js
rename to lib/components/src/typography/link/link.test.tsx
index 85b89caf4e69..cf3898508424 100644
--- a/lib/components/src/typography/link/link.test.js
+++ b/lib/components/src/typography/link/link.test.tsx
@@ -6,14 +6,14 @@ const LEFT_BUTTON = 0;
 const MIDDLE_BUTTON = 1;
 const RIGHT_BUTTON = 2;
 
-const createEvent = options => ({
+const createEvent = (options: any) => ({
   button: LEFT_BUTTON,
   preventDefault: jest.fn(),
   ...options,
 });
-const renderLink = props => shallow(<Link {...{ children: 'Content', ...props }} />);
+const renderLink = (props: any) => shallow(<Link {...{ children: 'Content', ...props }} />);
 
-const setup = ({ props, event }) => ({
+const setup = ({ props, event }: any) => ({
   e: createEvent(event),
   result: renderLink(props),
   onClick: props.onClick || jest.fn(),
diff --git a/lib/components/src/typography/link/link.js b/lib/components/src/typography/link/link.tsx
similarity index 79%
rename from lib/components/src/typography/link/link.js
rename to lib/components/src/typography/link/link.tsx
index 60beb3061644..3deee81693ec 100644
--- a/lib/components/src/typography/link/link.js
+++ b/lib/components/src/typography/link/link.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled, css } from '@storybook/theming';
+import React, { FunctionComponent } from 'react';
+import { styled, css, Theme } from '@storybook/theming';
 import { darken } from 'polished';
 
 import Icons from '../../icon/icon';
@@ -8,17 +7,25 @@ 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;
 
-const isPlainLeftClick = e =>
+const isPlainLeftClick = (e: React.MouseEvent) =>
   e.button === LEFT_BUTTON && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
 
-const cancelled = (e, cb = () => {}) => {
+const cancelled = (e: React.MouseEvent, cb: (_e: React.MouseEvent) => void) => {
   if (isPlainLeftClick(e)) {
     e.preventDefault();
     cb(e);
   }
 };
 
-const linkStyles = props => css`
+interface LinkStylesProps {
+  secondary?: boolean;
+  tertiary?: boolean;
+  nochrome?: boolean;
+  inverse?: boolean;
+  isButton?: boolean;
+}
+
+const linkStyles = (props: LinkStylesProps & { theme: Theme }) => css`
   display: inline-block;
   transition: all 150ms ease-out;
   text-decoration: none;
@@ -140,8 +147,13 @@ const linkStyles = props => css`
     `};
 `;
 
+interface LinkInnerProps {
+  withArrow?: boolean;
+  containsIcon?: boolean;
+}
+
 const LinkInner = styled.span`
-  ${props =>
+  ${(props: LinkInnerProps) =>
     props.withArrow &&
     css`
       > svg:last-of-type {
@@ -168,16 +180,23 @@ const LinkInner = styled.span`
     `};
 `;
 
-const A = styled.a`
+interface AProps {
+  href?: string;
+}
+
+const A = styled.a<AProps>`
   ${linkStyles};
 `;
 
-A.propTypes = {
-  children: PropTypes.node.isRequired,
-  href: PropTypes.string,
-};
-
-function Link({ cancel, children, onClick, withArrow, containsIcon, className, ...rest }) {
+const Link: FunctionComponent<LinkProps> = ({
+  cancel,
+  children,
+  onClick,
+  withArrow,
+  containsIcon,
+  className,
+  ...rest
+}) => {
   return (
     <A {...rest} onClick={cancel ? e => cancelled(e, onClick) : onClick} className={className}>
       <LinkInner withArrow={withArrow} containsIcon={containsIcon}>
@@ -186,22 +205,20 @@ function Link({ cancel, children, onClick, withArrow, containsIcon, className, .
       </LinkInner>
     </A>
   );
+};
+
+interface LinkProps extends LinkInnerProps, LinkStylesProps {
+  cancel?: boolean;
+  className?: string;
+  style?: object;
+  onClick?: (e: React.MouseEvent) => void;
+  href?: string;
 }
 
-Link.propTypes = {
-  cancel: PropTypes.bool,
-  className: PropTypes.string,
-  style: PropTypes.shape({}),
-  children: PropTypes.node,
-  onClick: PropTypes.func,
-  withArrow: PropTypes.bool,
-  containsIcon: PropTypes.bool,
-};
 Link.defaultProps = {
   cancel: true,
   className: undefined,
   style: undefined,
-  children: null,
   onClick: () => {},
   withArrow: false,
   containsIcon: false,
diff --git a/lib/components/src/typography/typography.stories.js b/lib/components/src/typography/typography.stories.tsx
similarity index 100%
rename from lib/components/src/typography/typography.stories.js
rename to lib/components/src/typography/typography.stories.tsx
diff --git a/lib/components/tsconfig.json b/lib/components/tsconfig.json
new file mode 100644
index 000000000000..31dedcc1d8c5
--- /dev/null
+++ b/lib/components/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": [
+      "webpack-env",
+      "jest",
+      "react-syntax-highlighter"
+    ]
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "src/**/__tests__/**/*"
+  ]
+}
diff --git a/lib/ui/src/settings/__snapshots__/about.stories.storyshot b/lib/ui/src/settings/__snapshots__/about.stories.storyshot
index 98e7aed005bb..060670ee7748 100644
--- a/lib/ui/src/settings/__snapshots__/about.stories.storyshot
+++ b/lib/ui/src/settings/__snapshots__/about.stories.storyshot
@@ -472,9 +472,11 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
             class="emotion-9"
           >
             <svg
-              title="Storybook icon"
               viewBox="0 0 64 64"
             >
+              <title>
+                Storybook icon
+              </title>
               <g
                 fill="none"
                 fill-rule="evenodd"
@@ -1766,9 +1768,11 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
             class="emotion-9"
           >
             <svg
-              title="Storybook icon"
               viewBox="0 0 64 64"
             >
+              <title>
+                Storybook icon
+              </title>
               <g
                 fill="none"
                 fill-rule="evenodd"
@@ -3026,9 +3030,11 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
             class="emotion-9"
           >
             <svg
-              title="Storybook icon"
               viewBox="0 0 64 64"
             >
+              <title>
+                Storybook icon
+              </title>
               <g
                 fill="none"
                 fill-rule="evenodd"
diff --git a/yarn.lock b/yarn.lock
index 9199af698a51..5323471cb49f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2862,6 +2862,11 @@
   dependencies:
     "@types/jest-diff" "*"
 
+"@types/js-beautify@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@types/js-beautify/-/js-beautify-1.8.0.tgz#0369d3d0e1f35a6aec07cb4da2ee2bcda111367c"
+  integrity sha512-/siF86XrwDKLuHe8l7h6NhrAWgLdgqbxmjZv9NvGWmgYRZoTipkjKiWb0SQHy/jcR+ee0GvbG6uGd+LEBMGNvA==
+
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
@@ -2986,6 +2991,20 @@
     "@types/react" "*"
     redux "^4.0.0"
 
+"@types/react-syntax-highlighter@^10.1.0":
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-10.1.0.tgz#9c534e29bbe05dba9beae1234f3ae944836685d4"
+  integrity sha512-dF49hC4FZp1dIKyzacOrHvqMUe8U2IXyQCQXOcT1e6n64gLBp+xM6qGtPsThIT9XjiIHSg2W5Jc2V5IqekBfnA==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-textarea-autosize@^4.3.3":
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/@types/react-textarea-autosize/-/react-textarea-autosize-4.3.3.tgz#85f542a4c582836d01b9751b3948dfad1642f0cb"
+  integrity sha512-fl0yK995xJg31Y/7EkR0rkg9hbIqX6mas7e/DZdMr0mb+CDZ6gwdYXor6XjWJqGW3MRsuKY9HbqHne9ZWQqNVg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^16.8.4":
   version "16.8.12"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.12.tgz#ffbdd7bcd2b7037c3f78e26c708922a2befbb71f"
@@ -2994,6 +3013,13 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/recompose@^0.30.5":
+  version "0.30.5"
+  resolved "https://registry.yarnpkg.com/@types/recompose/-/recompose-0.30.5.tgz#09890e3c504546b38193479e610e427ac0888393"
+  integrity sha512-PEQvFmudB9n0+ZvD8l7lh0olGAWmVAuVwCM4eotzWouH8/Kcr8/EcZyLhYILqoTlqzi6ey/3kbKQzJ/h3KkyXw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/selenium-webdriver@^3.0.0":
   version "3.0.16"
   resolved "https://registry.yarnpkg.com/@types/selenium-webdriver/-/selenium-webdriver-3.0.16.tgz#50a4755f8e33edacd9c406729e9b930d2451902a"
@@ -16891,7 +16917,7 @@ markdown-table@^1.1.0:
   resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.2.tgz#c78db948fa879903a41bce522e3b96f801c63786"
   integrity sha512-NcWuJFHDA8V3wkDgR/j4+gZx+YQwstPgfQDV8ndUeWWzta3dnDTBxpVzqS9lkmJAuV5YX35lmyojl6HO5JXAgw==
 
-markdown-to-jsx@^6.9.3:
+markdown-to-jsx@^6.9.1, markdown-to-jsx@^6.9.3:
   version "6.9.3"
   resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-6.9.3.tgz#31719e3c54517ba9805db81d53701b89f5d2ed7e"
   integrity sha512-iXteiv317VZd1vk/PBH5MWMD4r0XWekoWCHRVVadBcnCtxavhtfV1UaEaQgq9KyckTv31L60ASh5ZVVrOh37Qg==
@@ -19658,7 +19684,7 @@ polymer-webpack-loader@^2.0.3:
     postcss "^6.0.9"
     source-map "^0.5.6"
 
-popper.js@^1.14.4:
+popper.js@^1.14.4, popper.js@^1.14.7:
   version "1.15.0"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.15.0.tgz#5560b99bbad7647e9faa475c6b8056621f5a4ff2"
   integrity sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==