Migrate @storybook/components to TS

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$/);

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"
       >

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": "*"

lib/components/src/ActionBar/ActionBar.stories.js → 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

lib/components/src/ActionBar/ActionBar.js → 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,
-};

lib/components/src/Badge/Badge.js → 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;

lib/components/src/Button/Button.js → 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 = {

lib/components/src/ScrollArea/ScrollArea.stories.js → 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 = () => (

lib/components/src/ScrollArea/ScrollArea.js → 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,

lib/components/src/ScrollArea/ScrollAreaStyles.js → 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',
   },